@charset "UTF-8";

/**
 * ChaoJing
 * 「望海巷海灣」專案小區
 */

/* body {
    display: flex;
    align-items: stretch;
    justify-content: center;
} */

.leaflet-control-fullscreen{
    margin-top: 10px !important;
}

.leaflet-top {
    top: 10px;
}

.map-left-legend,
#button-toggle-left-legend {
    top: 130px;
}

#table-OtherOneDiscoverList_wrapper{
    width: 100% !important;
}

#table-OtherOneDiscoverList{
    width: 100% !important;
}

@media (min-width: 941px) {
    .info-part-fixed-title {
        width: 31rem;
        top: 8rem;
        max-height: calc(100% - 9rem);
    }
}

#app-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    color: var(--color-sub4);
    font-size: 1.4rem;
    letter-spacing: 0.5px;
}

@media (min-width: 941px) {

    #page-top {
        padding: 12px 30px;
        position: absolute;
        top: 0;
        left: 50%;
        z-index: 999;
        transform: translateX(-50%);
        background-color: rgba(255, 255, 255, 0.8);
        box-shadow: 0 0 10px rgb(0, 0, 0, 0.5);
    }
}

.page-title {
    color: var(--color-sub4);
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    position: relative;
}

.btn-lang {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: #888;
}

.btn-lang:hover {
    background-color: rgba(0, 0, 0, 0.06);
    color: #444;
}

@media (max-width: 940px) {
    .page-title {
        display: none;
    }

    .btn-lang {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        background-color: #FFF;
        top: 12px;
        right: 3.25rem;
        color: var(--color-sub4);
        z-index: 999;
    }

    .btn-lang:hover {
        background-color: #FFF;
        color: var(--color-sub4);
    }
}

.f-cen {
    display: flex;
    align-items: center;
    justify-content: center;
}

.legend-icon-circle {
    width: 100%;
    height: 100%;
    font-size: .8rem;
    text-align: center
}

.legend-icon-circle-marker,
.legend-icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px #FFF solid;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    /* background-color: #0076E5; */
    background-color: var(--main-orange);
    color: #FFF;
}

.legend-icon-circle-marker {
    font-size: .9rem;
    transform: translate(calc(-50% + 6px), calc(-50% + 6px));
}

.legend-icon-circle-in-bi {
    width: 2rem;
    height: 2rem;
}

.leaflet-interactive>div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: bold;
}

.legend-icon-cloud-to-ground {
    background-color: #d23d29;
    color: #FFF;
}

.legend-icon-cloud-flashes {
    background-color: #c71585;
    color: #FFF;
}

/* ＝＝＝ 長浪警戒 ＝＝＝ */
/* 長浪警戒 */
.legend-icon-swells-alert {
    width: 2.5rem;
    height: 2.5rem;
    background-color: transparent;
    background-image: url("../../ChaoJing/Marker/SwellsAlert-Swells.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    box-shadow: none;
    border: 0;
}

/* 巨浪警戒 */
.legend-icon-swells-alert-VeryRoughSea {
    background-image: url("../../ChaoJing/Marker/SwellsAlert-VeryRoughSea.png");
}

/* 預警資料 */
.legend-icon-swells-alert-predict {
    opacity: 0.5;
}

/* 左方圖標 長浪警戒 */
.map-left-legend-item-img-swells-alert-Swells-predict,
.map-left-legend-item-img-swells-alert-VeryRoughSea-predict {
    opacity: 0.5;
}

/* ＝＝＝ 對地閃電 ＝＝＝ */
.bi-lightning-ctg::before,
.bi-lightning-ctg-white::before,
.layer-visible:checked+.bi-lightning-ctg::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: contain;
    background-image: url('../../ChaoJing/bi-icons/lightning-ctg-main.svg')
}

.layer-classification-show .bi-lightning-ctg::before {
    background-image: url('../../ChaoJing/bi-icons/lightning-ctg-blue.svg')
}

.is-selected>.bi-lightning-ctg::before,
.layer-classification-show .is-selected>.bi-lightning-ctg::before,
.bi-lightning-ctg-white::before,
.awesome-marker .bi-lightning-ctg::before {
    background-image: url('../../ChaoJing/bi-icons/lightning-ctg-white.svg')
}

.bi-lightning-ctg.bi-595959::before,
.layer-visible:not(:checked)+.bi-lightning-ctg::before {
    background-image: url('../../ChaoJing/bi-icons/lightning-ctg-595959.svg')
}

/* ＝＝＝ 主要湧浪 ＝＝＝ */
.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('../../../Images/bi-icons/main-surge-main.webp');
}

.layer-classification-show .bi-main-surge::before {
    background-image: url('../../../Images/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('../../../Images/bi-icons/main-surge-white.webp');
}

.bi-main-surge.bi-595959::before,
.layer-visible:not(:checked)+.bi-main-surge::before {
    background-image: url('../../../Images/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('../../../Images/bi-icons/second-surge-main.webp');
}

.layer-classification-show .bi-second-surge::before {
    background-image: url('../../../Images/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('../../../Images/bi-icons/second-surge-white.webp');
}

.bi-second-surge.bi-595959::before,
.layer-visible:not(:checked)+.bi-second-surge::before {
    background-image: url('../../../Images/bi-icons/second-surge-595959.webp');
}

/* ＝＝＝ 波浪譜寬 ＝＝＝ */
.bi-wave-divergence::before,
.layer-visible:checked+.bi-wave-divergence::before,
.bi-wave-divergence-white::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: contain;
    background-image: url('../../../Images/bi-icons/wave-divergence-main.webp');
}

.layer-classification-show .bi-wave-divergence::before {
    background-image: url('../../../Images/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,
.awesome-marker .bi-wave-divergence::before {
    background-image: url('../../../Images/bi-icons/wave-divergence-white.webp');
}

.bi-wave-divergence.bi-595959::before,
.layer-visible:not(:checked)+.bi-wave-divergence::before {
    background-image: url('../../../Images/bi-icons/wave-divergence-595959.webp');
}

.bi-wave-divergence.bi-yellow::before {
    background-image: url('../../../Images/bi-icons/wave-divergence-yellow.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('../../../Images/bi-icons/thermometer-sea-main.webp');
}

.layer-classification-show .bi-thermometer-sea::before {
    background-image: url('../../../Images/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('../../../Images/bi-icons/thermometer-sea-white.webp');
}

.bi-thermometer-sea.bi-595959::before,
.layer-visible:not(:checked)+.bi-thermometer-sea::before {
    background-image: url('../../../Images/bi-icons/thermometer-sea-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('../../../Images/bi-icons/dew-point-main.svg');
}

.layer-classification-show .bi-dew-point::before {
    background-image: url('../../../Images/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('../../../Images/bi-icons/dew-point-white.svg');
}

.bi-dew-point.bi-595959::before,
.layer-visible:not(:checked)+.bi-dew-point::before {
    background-image: url('../../../Images/bi-icons/dew-point-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('../../../Images/bi-icons/pop-main.svg');
}

.layer-classification-show .bi-pop::before {
    background-image: url('../../../Images/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('../../../Images/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('../../../Images/bi-icons/thermometer-body-main.svg');
}

.layer-classification-show .bi-thermometer-body::before {
    background-image: url('../../../Images/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('../../../Images/bi-icons/thermometer-body-white.svg');
}

.bi-thermometer-body.bi-595959::before,
.layer-visible:not(:checked)+.bi-thermometer-body::before {
    background-image: url('../../../Images/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('../../../Images/bi-icons/uv-main.svg');
}

.layer-classification-show .bi-uv::before {
    background-image: url('../../../Images/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('../../../Images/bi-icons/uv-white.svg');
}

.bi-uv.bi-595959::before,
.layer-visible:not(:checked)+.bi-uv::before {
    background-image: url('../../../Images/bi-icons/uv-595959.svg');
}


@media (max-width: 940px) {

    .map-left-legend {
        max-width: initial;
        max-height: calc(100% - 200px);
    }

    .map-left-legend img {
        width: auto;
    }
}


/* ＝＝＝ 社群分享 視窗 ＝＝＝ */

.community-shares {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.btn.community-share-item {
    flex-direction: column;
    width: calc(25% - 0.75rem);
    margin: 0.375rem;
    padding: 1.25rem 1rem;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    --bs-btn-bg: #FFF;
    --bs-btn-hover-bg: rgba(0, 0, 0, 0.06);
    --bs-btn-active-bg: rgba(0, 0, 0, 0.08);
    --bs-btn-border-color: #DDD;
    --bs-btn-hover-border-color: #DDD;
    --bs-btn-active-border-color: #DDD;
}

.community-share-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 2rem;
    height: 2rem;
    margin: 0 auto;
    border-radius: 50%;
    font-size: 1rem;
    color: #FFF;
}

.community-share-item-icon-Facebook {
    background-color: #5161bf;
}

.community-share-item-icon-Line {
    background-color: #51bf54;
}

.community-share-item-icon-X {
    background-color: #333;
}

.community-share-item-icon-other {
    background-color: #AAA;
}

.community-share-item-name {
    margin-top: 0.75rem;
}

/* ＝＝＝＝＝＝ 天氣預報 ＝＝＝＝＝＝ */

.Table-Weather-Div {}

.Table-Weather {}

table.Table-Weather.dataTable thead th,
table.Table-Weather.dataTable thead td,
table.Table-Weather.dataTable tbody th,
table.Table-Weather.dataTable tbody td {
    padding: 0.25rem;
}

table.Table-Weather.dataTable thead th,
table.Table-Weather.dataTable thead td {
    border-bottom: 1px #DDD solid;
}

table.dataTable thead th,
table.dataTable thead td,
table.dataTable tfoot th,
table.dataTable tfoot td {
    text-align: center;
}

table.dataTable thead th,
table.dataTable tfoot th {
    font-weight: bold;
}

.Table-Weather .odd,
table.dataTable.Table-Weather thead tr>.dtfc-fixed-start.odd,
table.dataTable.Table-Weather tbody tr>.dtfc-fixed-start.odd {
    background-color: #f5f5f5;
}

.weather-unit-btn {
    display: inline-flex;
    padding: 4px;
    font-size: .8rem;
    border: 1px transparent solid;
    border-radius: 4px;
    background-color: #EEE;
    color: var(--color-sub4);
}

.Table-Weather .weather-icon {
    display: block;
    margin: 0 auto;
}

.weather-icon {
    width: 100%;
    /* max-width: 2.2rem; */
    /* max-width: 6rem; */
}