/*202405*/
:root {
    --avbar-vertical-width: 4rem;
}

/* Home Page */
@media all {
    .iphone-x {
        position: relative;
        margin: 40px auto;
        width: 360px;
        height: 780px;
        background-color: #14191e;
        border-radius: 40px;
        -webkit-box-shadow: 0 0 0 11px #14191e,0 0 0 13px #14191e,0 0 0 20px #101418;
        box-shadow: 0 0 0 11px #14191e,0 0 0 13px #14191e,0 0 0 20px #101418
    }

        .iphone-x:before, .iphone-x:after {
            content: "";
            position: absolute;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%)
        }

        .iphone-x:after {
            bottom: 7px;
            width: 140px;
            height: 4px;
            background-color: #eef0f2;
            border-radius: 10px
        }

        .iphone-x:before {
            top: 0;
            width: 56%;
            height: 30px;
            background-color: #14191e;
            border-radius: 0 0 40px 40px
        }

        .iphone-x i, .iphone-x b, .iphone-x s, .iphone-x span {
            position: absolute;
            display: block;
            color: transparent
        }

        .iphone-x i {
            top: 0;
            left: 50%;
            -webkit-transform: translate(-50%,6px);
            transform: translate(-50%,6px);
            height: 8px;
            width: 15%;
            background-color: #000;
            border-radius: 8px;
            -webkit-box-shadow: inset 0 -3px 3px 0 rgba(255,255,255,.2);
            box-shadow: inset 0 -3px 3px 0 rgba(255,255,255,.2)
        }

        .iphone-x b {
            left: 10%;
            top: 0;
            -webkit-transform: translate(180px,4px);
            transform: translate(180px,4px);
            width: 12px;
            height: 12px;
            background-color: #000;
            border-radius: 12px;
            -webkit-box-shadow: inset 0 -3px 2px 0 rgba(255,255,255,.2);
            box-shadow: inset 0 -3px 2px 0 rgba(255,255,255,.2)
        }

            .iphone-x b:after {
                content: "";
                position: absolute;
                background-color: rgba(15,111,236,.5);
                width: 6px;
                height: 6px;
                top: 2px;
                left: 2px;
                top: 3px;
                left: 3px;
                display: block;
                border-radius: 4px;
                -webkit-box-shadow: inset 0 -2px 2px rgba(0,0,0,.5);
                box-shadow: inset 0 -2px 2px rgba(0,0,0,.5)
            }

        .iphone-x s {
            top: 50px;
            text-align: center;
            text-decoration: none;
            width: 100%;
            font-size: 70px;
            font-weight: 100;
            padding-top: 60px
        }

        .iphone-x span {
            bottom: 50px;
            width: 40px;
            height: 40px;
            background-color: rgba(0,0,0,.3);
            border-radius: 50%;
            left: 30px
        }

            .iphone-x span + span {
                left: auto;
                right: 30px
            }

        .iphone-x.iphone-x-small {
            margin: 40px auto;
            width: 300px;
            height: 600px
        }

    [data-bs-theme=dark] .iphone-x {
        -webkit-box-shadow: 0 0 0 11px var(--bs-gray-600), 0 0 0 13px var(--bs-gray-600), 0 0 0 20px var(--bs-gray-400);
        box-shadow: 0 0 0 11px var(--bs-gray-600), 0 0 0 13px var(--bs-gray-600), 0 0 0 20px var(--bs-gray-400);
    }

        [data-bs-theme=dark] .iphone-x:after {
            background-color: var(--bs-light)
        }

        [data-bs-theme=dark] .iphone-x:before {
            background-color: var(--bs-gray-600)
        }

    [data-bs-theme=dark] .mac_screen {
        background: var(--bs-gray-700)
    }

        [data-bs-theme=dark] .mac_screen:before {
            border: none
        }

    .mac_container {
        width: 100%;
        margin: 10px auto
    }

    .mac_scaler {
        margin: auto;
        width: 100%;
        padding-top: 57.875%;
        height: 0;
        position: relative
    }

    .mac_holder {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%
    }

    .mac_screen {
        margin: auto;
        background: #14191e;
        width: 86%;
        height: 100%;
        border-top-left-radius: 2% 3%;
        border-top-right-radius: 2% 3%;
        border-bottom-left-radius: 5% 3%;
        border-bottom-right-radius: 5% 3%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 3%;
        position: relative;
        overflow: hidden;
        border: 1px solid #eef0f2
    }

        .mac_screen:before {
            content: "";
            position: absolute;
            right: .3%;
            top: .5%;
            width: 36.5%;
            height: 35%;
            border: 1px solid #14191e;
            border-bottom: none;
            border-left: none;
            border-top-right-radius: 4.5% 7%
        }

        .mac_screen:after {
            content: "";
            position: absolute;
            right: -25%;
            top: -25%;
            width: 40%;
            height: 150%;
            background: rgba(238,240,242,.2);
            background: -webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0.2)),color-stop(40%,rgba(238,240,242,0)));
            background: linear-gradient(rgba(255,255,255,0.2),rgba(238,240,242,0) 40%);
            -webkit-transform: rotate(-30deg);
            transform: rotate(-30deg)
        }

    .mac_camera {
        background: #333;
        border-radius: 50%;
        width: 1%;
        height: 1.5%;
        position: absolute;
        left: 49.5%;
        top: 2%
    }

        .mac_camera:after {
            content: "";
            position: absolute;
            left: 35%;
            top: 40%;
            width: 30%;
            height: 30%;
            border-radius: 50%;
            background: #777
        }

    .mac_bottom {
        background: #e9e9e9;
        background: -webkit-gradient(linear,left top,left bottom,color-stop(50%,#ccc),to(#444));
        background: linear-gradient(#ccc 50%,#444);
        width: 100%;
        height: 3%;
        position: relative;
        top: -1.7%;
        border-bottom-left-radius: 6% 50%;
        border-bottom-right-radius: 6% 50%
    }

    .mac_bottom_top_half {
        width: 100%;
        height: 50%;
        background: #e9e9e9;
        background: -webkit-gradient(linear,left top,right top,from(#aaa),color-stop(0.5%,#f3f3f3),color-stop(2.5%,#aaa),color-stop(5.5%,#f3f3f3),color-stop(94.5%,#f3f3f3),color-stop(97.5%,#aaa),color-stop(99.5%,#f3f3f3),to(#aaa));
        background: linear-gradient(90deg,#aaa,#f3f3f3 0.5%,#aaa 2.5%,#f3f3f3 5.5%,#f3f3f3 94.5%,#aaa 97.5%,#f3f3f3 99.5%,#aaa)
    }

    .mac_bottom:after {
        content: "";
        position: absolute;
        right: 1%;
        bottom: 11%;
        width: 98%;
        height: 0%;
        -webkit-box-shadow: 1px 0 8px 1px #333;
        box-shadow: 1px 0 8px 1px #333
    }

    .mac_thumb_space {
        background: #bbb;
        background: radial-gradient(90% 150% at 50% 1%,#eee 49%,#888);
        margin: auto;
        width: 15%;
        height: 60%;
        border-bottom-left-radius: 8% 100%;
        border-bottom-right-radius: 8% 100%
    }

    .mac_screen_content {
        width: 100%;
        height: 100%;
        text-align: center
    }

    #WcCustomOverlay {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .loading-overlay.loading-theme-dark #WcCustomOverlay {
        background-color: #141824 !important;
    }

    .navbar-vertical .navbar-vertical-content .nav-link-icon {
        margin-right: .3rem;
    }

    .iframePrint {
        width: 100%; /* 宽度自适应屏幕 */
        max-width: 1056px; /* 横版信纸宽度（11 英寸 × 96 dpi） */
        height: auto;
        aspect-ratio: 11 / 8.5; /* 维持横版信纸比例 */
        border: 1px solid #ccc;
    }

    /*
    .navbar-vertical .navbar-vertical-content .nav-link-text {
        color: var(--phoenix-emphasis-color);
    }
    */

    @media (min-width: 992px) {
        .navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav .nav-link {
            padding-left: 2.5rem;
        }
    }

    /*Home Page*/
    @media(max-width: 575.98px) {

        .WcBreadcrumb {
            margin-top: 1.5rem;
        }

        .iphone-x, .iphone-x.iphone-x-small {
            width: 260px;
            height: 540px;
            background-size: 100%
        }

            .iphone-x.iphone-x-half {
                width: 240px;
                height: 280px;
                background-size: 100%
            }

            .iphone-x b {
                left: -6%
            }
    }
}