$editSideWidth: 200px;
$fontMidium: 14px;
$colorBlueFont: #1687d9;
$colorLightGrayFont: #3e4e59;
$colorDarkGrayFont: #36434d;
$colorBlackFont: 0a131a;
$colorBlueBorder: #96d0fa;
$colorGrayBorder: #f5f8fa;
$colorGrayInputBorder: #e4ebf0;
$colorLightBlueBg: #f5f8fa;
$colorDarkGrayBorder: #c2cbd1;
$colorBlueBg: rgba(149, 208, 249, 0.3);
$colorTextDefault: #c3cbd1;
$colorDarkBlue: #1587d9;
body {
    margin: 0;
}
.pb-sys-bground {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 5px;
    z-index: -10;
    .pg-sys-port {
        //background-color: white;
        background-repeat: no-repeat;
        background-size: cover;
        -webkit-background-size: cover;
        position: absolute;
        left: 0px;
        right: 0px;
        bottom: 0px;
        top: 0px;
        background-repeat: no-repeat;
        background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
    }
}
.pb-sys-back-to-top {
    opacity: 0.5;
    background-image: url("//xfile4.tita.com/ux/upaas-portal/release/extras/images/pb003/rocket.png");
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 100%;
    background-color: #ffffff;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: opacity 0.2s;
    &:hover {
        opacity: 1;
    }
}
.pb-sys-bground.ub-editing {
    left: $editSideWidth;
    right: $editSideWidth;
    top: 50px;
    // background-image:
    //     linear-gradient(#E4EBF0 1px, transparent 0),
    //     linear-gradient(90deg,#E4EBF0 1px, transparent 0),
    //     linear-gradient(#E4EBF0 1px, transparent 0),
    //     linear-gradient(90deg, #E4EBF0 1px, transparent 0);
    // background-size:5px 5px;
    // background-position: 0px -15px;
    //background-color: #f1f1f1;
    background: url(bg2.png) -1px -1px;
    background-size: 7px;
    .pg-sys-port {
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 0px;
        top: 10px;
        overflow: hidden;
    }
}

.t-page-builder {
    //react-grid-layout style rewrite;
    .react-grid-item.tub-grid-box {
        .placeholder-component {
            height: 100%;
            width: 100%;
            text-align: center;
            line-height: 100%;
            background-color: rgb(254, 201, 203);
        }
        &.default-ten-padding {
            .react-resizable-handle {
                bottom: 5px;
                right: 5px;
                z-index: 2;
            }
        }
        &.custome-twenty-padding {
            .react-resizable-handle {
                bottom: 10px;
                right: 10px;
                z-index: 2;
            }
        }
    }
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    .pb-of-bfc {
        overflow: hidden;
    }
    .pd-of-marg {
        padding: 1px;
    }
    font-size: 12px;
    font-family: PingFangSC-Regular;
    color: $colorLightGrayFont;
    .tub-section-box {
        border-radius: 2px;
    }
    .tub-section-box + .tub-section-box {
        margin-top: 15px;
    }

    .ui-b-v-proxy {
        border: solid 1px transparent;
        background: white;
        border-radius: 5px;
    }
    * {
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    ::-webkit-input-placeholder {
        /* WebKit, Blink, Edge */
        color: $colorTextDefault;
        font-weight: 200;
    }
    :-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: $colorTextDefault;
        opacity: 1;
        font-weight: 200;
    }
    ::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: $colorTextDefault;
        opacity: 1;
        font-weight: 200;
    }
    :-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        color: $colorTextDefault;
        font-weight: 200;
    }

    .ub-layout-grid {
        .tub-section-box {
            height: 100%;
            .ui-b-v-proxy {
                height: 100%;
            }
        }
    }

    .pb-form-switch {
        position: relative;
        cursor: pointer;
        .toggle-track {
            width: 45px;
            height: 20px;
            border-radius: 10px;
            background-color: $colorDarkBlue;
            .check {
                background-position: 9px 50%;
                opacity: 1;
                transition: all 0.3s ease;
            }
            .no-check {
                background-position: 0px 50%;
                opacity: 0;
                transition: all 0.3s ease;
            }
            div {
                width: 18px;
                height: 100%;
                float: left;
            }
        }
        &.left {
            .toggle-thumb {
                left: 2px;
            }
            .check {
                opacity: 0;
            }
            .no-check {
                opacity: 1;
            }
            .toggle-track {
                background: $colorTextDefault;
            }
        }
        .toggle-thumb {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            position: absolute;
            top: 2px;
            left: 27px;
            background: #fff;
        }
    }
}

.t-page-builder.on-editing {
    .tub-section-box:hover {
        box-shadow: 0px 0px 5px 0 $colorBlueBorder;
    }

    .ub-editPanel {
        width: $editSideWidth;
        position: fixed;
        top: 50px;
        bottom: 0;
        left: 0;
        box-shadow: 1px 0px 1px 0px rgba(0, 0, 0, 0.2);
        transition: box-shadow 0.3s ease;
        background: $colorGrayBorder;
        .editpanel-search-wrapper {
            height: 45px;
            background: #fff;
            .editpanel-search-inner {
                padding: 15px 0 0 10px;
                position: relative;
                .bottom-line {
                    width: 0;
                    height: 2px;
                    background-color: $colorDarkBlue;
                    position: absolute;
                    left: 50%;
                    top: 43px;
                    transition: all ease 0.2s;
                }
                .editpanel-search-cancel {
                    width: 14px;
                    height: 14px;
                    position: absolute;
                    right: 15px;
                    top: 24px;
                    cursor: pointer;
                }
            }
            input {
                border: none;
                border-bottom: 1px solid #e4ebf0;
                width: 180px;
                height: 30px;
                outline: none;
                font-size: 14px;
                line-height: 24px;
                color: $colorLightGrayFont;
                transition: all ease 0.3s;
                background-position: 58px 50%;
                text-indent: 80px;
                &.with-value {
                    text-indent: 20px;
                    background-position: 0 50%;
                }
                &:focus {
                    text-indent: 20px;
                    background-position: 0 50%;
                }
                &:focus + .bottom-line {
                    width: 180px;
                    left: 10px;
                }
            }
        }
        .editpanel-c-group-item {
            .group-title {
                cursor: pointer;
            }
            .component-list {
                margin: 0;
                padding: 0;
                overflow: hidden;
                //列表展开收缩动画
                &.editpanel-c-animation-enter li {
                    height: 0;
                    opacity: 0;
                }
                &.editpanel-c-animation-enter-active li {
                    height: 30px;
                    opacity: 1;
                    transition: all 0.3s ease;
                }
                &.editpanel-c-animation-leave li {
                    height: 30px;
                    opacity: 1;
                }
                &.editpanel-c-animation-leave-active li {
                    height: 0px;
                    opacity: 0;
                    transition: all 0.3s ease;
                }
                li {
                    line-height: 30px;
                    list-style: none;
                    padding: 0 0 0 30px;
                    font-family: PingFangSC-Regular;
                    background-position: center right -300px;
                    &:nth-child(even) {
                        background-color: rgb(250, 251, 252);
                    }
                    &:nth-child(odd) {
                        background-color: rgb(245, 248, 250);
                    }
                    &:hover {
                        background-position: center right 5px;
                        color: $colorDarkBlue;
                    }
                    .component-name {
                        display: inline-block;
                        width: 146px;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                        vertical-align: middle;
                        &.candrag {
                            cursor: move;
                        }
                    }
                }
            }
            h3 {
                color: $colorDarkGrayFont;
                font-family: PingFangSC-Medium;
                font-size: 12px;
                height: 34px;
                line-height: 34px;
                margin: 0;
                padding-left: 21px;
                background-color: #fff;
                position: relative;
                &.g-st-open .side-arrow {
                    transform: rotate(0deg);
                }
                .side-arrow {
                    width: 9px;
                    height: 9px;
                    position: absolute;
                    top: 13px;
                    left: 8px;
                    transition: all ease 0.3s;
                    transform: rotate(-90deg);
                }
            }
        }
        /***滚动条开始***/
        &::-webkit-scrollbar {
            width: 6px;
        }
        &::-webkit-scrollbar-track {
            border-radius: 10px;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
        }
        /***滚动条结束***/

        .edit-panel-content {
            height: 100%;
        }
    }

    .ub-settings {
        position: fixed;
        width: $editSideWidth;
        right: 0;
        top: 50px;
        bottom: 0;
        background: #f5f8fa;

        box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.3);
        transition: box-shadow 0.3s ease;
        overflow-y: auto;
        .settings-title {
            background-color: rgba(0, 158, 234, 1);
            color: white;
            text-align: center;
            line-height: 30px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            margin-top: 0;
        }
        .common-props-backimg {
            .backimg-item {
                height: 38px;
                width: 38px;
                background-size: cover;
                background-repeat: no-repeat;
                float: left;
                margin: 2px;
                border-radius: 2px;
                border: 1px solid $colorTextDefault;
            }
            .backimg-item.img-selected {
                border: 1px solid $colorBlueBorder;
                box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
                border-radius: 2px;
            }
        }
        .props-type-tabs {
            border-bottom: solid 1px #aaa;
            .insp-h-tab {
                float: left;
                padding: 3px 10px;
                font-size: 12px;
                color: $colorLightGrayFont;
                position: relative;
                top: 1px;
                cursor: pointer;
            }
            .insp-h-tab.tab-crnt {
                color: $colorBlueFont;
                background-color: rgba(white, 0.5);
                border-top-left-radius: 3px;
                border-top-right-radius: 3px;
            }
        }

        .props-container {
            .bottom-line {
                position: absolute;
                top: 99%;
                left: 0;
                height: 1px;
                width: 100%;
            }
            .p-cont-title {
                margin: 0;
                padding: 0;
                cursor: pointer;
                text-indent: 10px;
                color: $colorBlackFont;
                height: 30px;
                line-height: 30px;
                background-position: 175px 50%;
                position: relative;
            }
            .p-item-wrap {
                background: #fff;
                display: block;
                &.is-hide {
                    display: none;
                }
                .element-prop-item {
                    padding: 10px 10px;
                    position: relative;
                    & > h3 {
                        margin: 0;
                        padding: 0 0 5px 0;
                        color: $colorLightGrayFont;
                    }
                }
            }
        }

        h3,
        h5 {
            color: #36434d;
            font-size: 12px;
            font-weight: normal;
        }
        .element-prop-item {
            padding-bottom: 15px;
            font-size: 12px;
            input[type="text"] {
                height: 24px;
                border: 1px solid $colorGrayInputBorder;
                border-radius: 2px;
                outline: none;
                &:hover {
                    border-color: #96d1fa;
                    box-shadow: 0 0 1px 1px $colorBlueBorder;
                }
            }
            input[type="text"]:focus {
                border-color: $colorDarkBlue;
            }
            .dynamic-field input,
            .component-title input {
                width: 100%;
            }
            .df-component-size {
                .size-item {
                    float: left;
                    width: 68px;
                    font-size: 12px;
                    line-height: 24px;
                    input[type="text"] {
                        width: 42px;
                        margin: 0 0 0 5px;
                    }
                }
                .size-item + .size-item {
                    width: 62%;
                }
            }
            .props-dir-distances {
                input {
                    width: 35px;
                }
            }
        }

        .element-prop-item .tub-broadcast-bind {
            .tub-broadcast-save {
                width: 50px;
                height: 28px;
                background: #f5f8fa;
            }
        }
        .element-prop-item > h3 {
            color: #36434d;
            padding-bottom: 2px;
            margin: 15px 0 5px 0;
        }
        .select-border-style {
            margin-top: 10px;
            .border-st-wrp {
                float: left;
                padding: 6px;
                input {
                    margin-left: 9px;
                }
                .st-item {
                    height: 28px;
                    width: 28px;
                    border-radius: 5px;
                }
            }
            .border-st-wrp.b-selected {
                border: solid 1px $colorBlueBorder;
                background-color: $colorBlueBg;
                .st-item {
                    height: 26px;
                    width: 26px;
                }
            }
            .border-st-wrp + .border-st-wrp {
                margin-left: 17px;
            }
        }
    }
}

.ub-workspace {
    position: fixed;
    overflow-x: auto;
    overflow-y: hidden;
    top: 60px;
    left: 210px;
    right: 210px;
    bottom: 0;
    .drag-over {
        .over-mask {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: black;
            z-index: 999;
            opacity: 0.1;
        }
        & > .mask-direction-tip {
            position: absolute;
            left: 0;
            right: 0;
            height: 10px;
            background-color: lightgreen;
            z-index: 1000;
            &.up {
                top: 0;
            }
            &.down {
                bottom: 0;
            }
        }
    }
    .workspace-scale {
        transform-origin: left top;
        -ms-transform-origin: left top;
        transition: all 0.1s;
        position: relative;
        // overflow: hidden;
        overflow-y: auto;
        // min-width: 1000px;
    }
    .ub-layout-item {
        border: dotted 2px $colorBlueBorder;
        //min-height: 200px;
        // padding-bottom: 50px;
        margin-bottom: 20px;
        position: relative;
    }

    .ui-b-v-proxy {
        .grid-options-btn {
            background-color: #f5f8fa;
            box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
            z-index: 100;
            cursor: pointer;
            display: none;
            position: absolute;
            height: 30px;
        }
        &:hover .grid-options-btn {
            display: block;
        }
        .tub-grid-del {
            width: 30px;
            padding: 0;
            right: 10px;
            border-radius: 30px;
        }
        .sub-component-holder {
            min-height: 20px;
            background-color: gray;
        }
    }
}

/**edit-panel-content开始**/

/***组件开始***/
.edit-panel-elements {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    .no-search-result {
        height: calc(100% - 51px);
        background-position: 50% 44px;
    }
}
/***组件结束***/

/**edit-panel-content结束**/

/**ub-editPanel结束**/

/**work-space-header开始**/

.t-page-builder.on-editing {
    .workspace-header {
        height: 50px;
        position: fixed;
        top: 0;
        width: 100%;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
        background: #fff;
        .pb-log-wrap {
            width: $editSideWidth;
            float: left;
            .pb-logo {
                height: 28px;
                border-right: 1px solid #e4ebf0;
                margin: 11px 0 0 15px;
            }
        }

        .page-zoom-wrap {
            float: right;
            width: 100px;
            position: relative;
            &:hover .selector-box.s {
                border-color: #96d1fa;
                box-shadow: 0 0 1px 1px $colorBlueBorder;
            }
            &.is-active .selector-list {
                display: block;
            }
            &.is-active .selector-box {
                border-color: $colorDarkBlue;
                box-shadow: 0 0 1px 1px $colorBlueBorder;
            }
            .selector-box {
                cursor: pointer;
                height: 23px;
                line-height: 23px;
                border: solid 1px $colorGrayInputBorder;
                border-radius: 4px;
                margin-top: 13px;
                text-indent: 10px;
                font-family: PingFangSC-Regular;
                color: $colorLightGrayFont;
                background-position: 80px 55%;
            }
            .selector-list {
                margin: 0;
                padding: 0;
                background-color: white;
                width: 100px;
                border-radius: 2px;
                box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.3);
                display: none;
                li {
                    height: 30px;
                    line-height: 30px;
                    padding: 0 0 0 10px;
                    cursor: pointer;
                    list-style: none;
                    &:hover {
                        background: $colorDarkBlue;
                        color: #fff;
                    }
                }
            }
        }

        .page-title-wrap {
            float: left;
            max-width: 500px;
            .page-title {
                margin: 0;
                padding: 0 0 0 10px;
                font-size: $fontMidium;
                color: $colorLightGrayFont;
                line-height: 50px;
                font-weight: normal;
            }
        }
        .page-actions {
            float: right;
            //width: 300px;
            height: 100%;
            position: relative;
            .ac-button {
                float: left;
                width: 60px;
                height: 100%;
                cursor: pointer;
                position: relative;
            }
            .save:not(.a-disabled) {
                background-color: #1687d9;
            }
            .save.a-disabled {
                background-color: #e4eaf0;
            }
            .redo.a-disabled {
                opacity: 0.2;
            }
            .undo.a-disabled {
                opacity: 0.2;
            }
            .ac-button:not(:last-child):not(:nth-last-child(2)) .border-line {
                width: 1px;
                height: 24px;
                background: #e4ebf0;
                position: absolute;
                right: 0;
                top: 13px;
            }
        }
        /***actions 提示语组件*/
        .page-actions {
            .controler-tips {
                position: absolute;
                color: #fff;
                font-size: 12px;
                background: #36434d;
                padding: 8px 10px;
                text-align: center;
                border-radius: 2px;
                z-index: 2;
            }
            .temporary-span {
                height: 0;
                opacity: 0;
                overflow: hidden;
                position: absolute;
                padding: 8px 10px;
                font-size: 12px;
            }
            .controler-tips:after {
                content: "";
                width: 0;
                height: 0;
                top: -9px;
                left: calc(50% - 3px);
                display: block;
                border: 5px solid transparent;
                border-bottom: 5px solid #36434d;
                position: absolute;
            }
            .controler-tips.hide {
                display: none;
            }
        }
    }
}
/**work-space-header结束**/

/**ub-workspace开始**/


.t-page-builder .tub-gird-layout .tub-grid-box {
    border-radius: 2px;
    .grid-size-tip {
        padding: 0 10px;
        position: absolute;
        left: 0;
        bottom: -22px;
        color: #f5f8fa;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 2px;
        font-size: 12px;
        line-height: 20px;
    }
}
.t-page-builder.on-editing .tub-gird-layout:empty{
    min-height: 196px;
    &::after{
        content: '从左侧列表拖入组件';
        color: #c2cbd1;
        font-size: 18px;
        margin: 0 auto;
        position: relative;
        text-align: center;
        display: block;
        padding: 0 20px;
        line-height: 26px;
        top: calc(50% - 13px);
    }
}

/**ub-workspace结束**/

/***预览页面开始***/

/**结束预览模式下的边框和阴影**/
.viewer-preview-content {
    transition: height 0.3s ease;
    position: absolute;
    top: 40px;
    left: 40px;
    right: 40px;
    border: 1px solid #ccc;
    background: #fff;
    overflow: auto;
    border-radius: 4px;
    outline: none;
    padding: 15px;
    --webkit-overflow-scrolling: touch;
}
.viewer-preview-content .preview-btn-wrap {
    overflow: hidden;
    padding-bottom: 5px;
    height: 25px;
    border-bottom: 2px #ccc dotted;
    .pr-dev-list {
        float: right;
        width: 200px;
        margin: 0;
        padding: 0;
        li {
            float: left;
            width: 25%;
            list-style: none;
            a {
                display: inline-block;
                height: 18px;
                width: 18px;
            }
        }
    }
    .pr-close-wrap {
        float: left;
        a {
            display: inline-block;
            height: 18px;
            width: 18px;
        }
    }
}

.viewer-preview-content .container-dev {
    float: right;
    max-width: 250px;
    width: 1170px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.viewer-preview-content.lg {
    max-width: 100%;
}
.viewer-preview-content.md {
    max-width: 994px;
    left: 50%;
    margin-left: -479px;
}
.viewer-preview-content.sm {
    max-width: 768px;
    left: 50%;
    margin-left: -384px;
}
.viewer-preview-content.xs {
    max-width: 480px;
    left: 50%;
    margin-left: -240px;
}
/***预览页面结束***/

/***********react-css动画开始***********/

/***gird-box动画开始***/
@-webkit-keyframes antZoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.2);
        transform: scale(0.2);
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes antZoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.2);
        transform: scale(0.2);
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
.grid-box-appear {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
    animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

.grid-box-appear.grid-box-appear-active {
    -webkit-animation-name: antZoomIn;
    animation-name: antZoomIn;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}
/**grid box 动画结束**/

// .dynamic-field 动态组件
.tub-dymamic-field-tree {
    float: left;
    overflow: auto;
    border: 1px solid #aaa;
    width: 45%;
    height: 200px;
    padding: 5px;
}
.tub-dymamic-field-tree + .tub-dymamic-field-tree {
    margin-left: 10px;
}
.dynm-source-selected,
.dynm-target-selected {
    background-color: #ffffaa;
}
.tub-file-editor-container {
    font-size: 12px;

    padding: 0px 10px 10px 10px;

    border-radius: 2px;

    dynam-tree-container {
        margin-bottom: 10px;
    }

    .dynam-cf-list {
        height: 120px;
        overflow: auto;
    }

    .a-node {
        cursor: pointer;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    h3 {
        margin: 0;
        padding: 5px 5px 10px 0px;
    }

    .tree-p .tree-p {
        padding-left: 12px;
        padding-bottom: 5px;
    }

    .t-key {
        color: olivedrab;
    }

    .t-tip {
        color: dimgray;
    }
}

// contextMenuStyle
.pb-component-context-menu {
    background-color: white;
    border: solid 1px #ddd;
    ul {
        padding: 0;
        margin: 0;
        .content-menu-item {
            font-size: 14px;
            line-height: 28px;
            list-style: none;
            padding: 2px 10px;
            width: 150px;
            cursor: pointer;
            &:hover {
                background-color: #efefef;
            }
            &.disabled {
                color: #ccc;
            }
            &.disabled:hover {
                background-color: transparent;
                cursor: not-allowed;
            }
        }
        .content-menu-item + .content-menu-item {
            border-top: solid 1px #eee;
        }
    }
}
/*****************  翻转动画相关 -- start *******************/
/* entire container, keeps perspective */
.t-page-builder {
    .flip-container {
        -webkit-perspective: 800;
        -moz-perspective: 800;
        -o-perspective: 800;
        perspective: 800;
        // transform-style: preserve-3d;
        width: 100%;
        height: 100%;
        .front-inner, .back-inner{
            width: 100%;
            height: 100%;
        }
    }
    /*  UPDATED! flip the pane when hovered */
    .flip-container.fliping .back {
        z-index: 1;
        transform: rotateY(0deg);
    }
    .flip-container.fliping .front {
        transform: rotateY(180deg);
        z-index: 0;
    }
    /* flip speed goes here */
    .flipper {
        transition: 0.6s;
        // transform-style: preserve-3d;
        position: relative;
        width: 100%;
        height: 100%;
    }

    /* hide back of pane during swap */
    .front,
    .back {
        backface-visibility: hidden;
        transition: 0.6s;
        transform-style: preserve-3d;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 5px;
    }

    /*  UPDATED! front pane, placed above back */
    .front {
        z-index: 2;
        transform: rotateY(0deg);
    }

    /* back, initially hidden pane */
    .back {
        transform: rotateY(-180deg);
    }
}

/*****************  翻转动画相关 -- end *******************/