.page-mask img {
    width: 100%;
    height: 100%;
    max-width: unset;
    max-height: unset;
    position: absolute;
    right: 0;
    bottom: 0;
}

.section-heading {
    min-height: calc(386 * var(--rpx));
    padding-top: calc(133 * var(--rpx));
    padding-bottom: calc(24 * var(--rpx));
}

.card {
    padding: calc(30 * var(--rpx));
    background: rgba(255, 255, 255, .5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    z-index: 2;
}

.hidden {
    display: none;
}

.form .form-field[data-type="submit"] {
    display: flex;
}

.form .input.submit-button {
    margin-top: auto;
}

.radio-list.radio--button {
    gap: var(--gap);
}

.radio-list.radio--button .radio-item {
    width: calc(310 * var(--rpx));
    padding: calc(12 * var(--rpx));
}

.radio-list.radio--button .radio-item__content {
    width: 100%;
    text-align: center;
    height: calc(50 * var(--rpx));
    border: 1px solid #BCBCBC;
    background: #fff;
    border-radius: var(--radio-8);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.radio-list.radio--button .radio-item__btn {
    display: none;
}

.radio-list.radio--button .radio-item__text {
    margin-left: 0;
}

.radio-list.radio--button .radio-item__input[type="radio"]:checked+.radio-item__content {
    color: #fff;
    border-color: var(--primary);
    background: var(--primary-foreground);
}

.radio-list.radio--button .radio-item__input[type="radio"]:checked+.radio-item__content img {
    opacity: 0;
}

.row {
    display: flex;
    gap: var(--gap);
}

/*  */
.shipment-tracking .form-field[data-key="type"],
.shipment-tracking .form-field[data-key="bl-number"] {
    width: calc((100% - var(--gap) * 3) / 4);
}

.shipment-tracking .data-table.hidden {
    display: none;
}

.port-ship-form .form .border {
    margin-top: calc(20 * var(--rpx));
    margin-bottom: 0;
}

.port-ship-form .form-field[data-key="port_cd"] {
    max-width: calc(640 * var(--rpx));
    width: 100%;
}

.port-ship-form .form-field[data-key="firstime"],
.port-ship-form .form-field[data-key="lasttime"] {
    max-width: calc(360 * var(--rpx));
    width: 100%;
}

.vessel-sailing-form .form-field[data-key="vsl_cd"] {
    width: calc((100% - var(--gap) * 3) / 4);
}

.ptp-form .form-field[data-key="ts_ind"] {
    width: calc((100% - var(--gap) * 3) / 4);
}

.ptp .data-table.calendar .month-pager {
    margin-bottom: calc(30 * var(--rpx));
    font-size: 16px;
}

.ptp .data-table.calendar table {
    min-width: 960px;
    margin: auto;
}

.ptp .data-table.calendar th:first-of-type,
.ptp .data-table.calendar td:first-of-type {
    border-left: none;
    color: #f27861;
}

.ptp .data-table.calendar thead th {
    width: calc(100% / 7);
}

.ptp .data-table.calendar tbody td {
    height: 80px;
    text-align: left;
    vertical-align: top;
    padding: 5px;
}

.ptp .data-table.calendar tbody span.p {
    display: block;
    margin: -20px 0 0 22px;
}

.ptp .data-table.calendar tbody span.p a {
    color: var(--secondary);
    text-decoration: underline var(--secondary);
}

.route-schedule .select .input-suffix {
    background: transparent;
}

.route-schedule .card {
    position: relative;
    z-index: 2;
}

.route-schedule .tab-nav {
    position: relative;
    z-index: 1;
}

.route-schedule .tab-nav .tab-nav__list {
    gap: 0;
}

.route-schedule .tab-nav .tab-nav__viewport {
    padding-top: calc(63 * var(--rpx));
}

.route-schedule .tab-nav .tab-nav__item {
    width: max-content;
}

.route-schedule .tab-nav .tab-nav__arrow {
    margin-top: calc(63 * var(--rpx));
}

.route-schedule .tab-nav .tab-nav__item {
    width: max-content;
}

.route-schedule .tab-nav .tab-nav__tooltip {
    top: unset;
    bottom: calc(100% - calc(63 * var(--rpx)));
    transform: translate(0, -30%);
}

.route-schedule .data-table__content.scrollbar::-webkit-scrollbar-thumb {
    border-radius: 999px;
}

.route-schedule .data-table__content.scrollbar::-webkit-scrollbar-track {
    background: #eee;
}

.route-schedule table td {
    white-space: nowrap;
}

.route-schedule table thead th {
    border: 1px solid rgba(255, 255, 255, .1);
    padding: calc(20 * var(--rpx));
}

.route-schedule .blue {
    color: var(--secondary);
}

@media screen and (max-width: 1200px) {
    .page-mask img {
        width: unset;
    }
}

@media screen and (max-width: 768px) {
    .page-mask {
        height: 300px;
        top: var(--page-header-height);
    }

    .section-heading {
        padding-top: calc(280 * var(--rpx));
    }

    .card {
        padding: calc(20 * var(--rpx));
    }

    .section-heading {
        min-height: calc(300 * var(--rpx));
    }

    .radio-list.radio--button {
        --col: 2;
        --w: calc((100% - var(--gap) * (var(--col) - 1)) / var(--col));
        width: 100%;
    }

    .radio-list.radio--button .radio-item {
        width: var(--w);
    }

    .port-ship-form .form-field[data-key="firstime"],
    .port-ship-form .form-field[data-key="lasttime"] {
        max-width: unset;
    }

    .shipment-tracking .form-field[data-key="type"],
    .shipment-tracking .form-field[data-key="bl-number"],
    .ptp-form .form-field[data-key="ts_ind"],
    .vessel-sailing-form .form-field[data-key="vsl_cd"],
    .form-field:not([data-type="submit"]) {
        width: 100%;
        flex: 0 0 auto;
    }
}