/* 全屏加载容器 */
#loading {
    position: fixed;
    width: 100%;
    height: 100%;
    /*background: rgba(0, 0, 0, 0.8);*/
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 2em;
    z-index: 9999;
}


/* 加载动画 */
@keyframes spinner {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* 加载图标样式 */
.spinner-all-loading {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(0, 0, 0, 0.3);
    border-top: 5px solid #315efb;
    border-radius: 50%;
    animation: spinner 1s linear infinite;
}

#query {
    width: 650px;
    height: 60px;
    margin-top: 40px;
    padding: 0 16px;
    border-radius: 20px 0 0 20px;
    border: 2px solid #c4c7ce;
    border-right: 0;
    overflow: visible;
    outline: 0;
    font-size: 18px
}

#query:focus {
    border: 2px solid #3385ff;
    border-right: 0
}

.title-box {
    width: 800px;
    text-align: center;
    font-size: 20px;
    color: #1b2735;
    font-weight: 700
}

#leftName, #rightName {
    width: 100px;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    transition: transform 1s
}

#textBut {
    width: 100px;
    height: 30px;
    text-align: center;
    border-radius: 10px;
    line-height: 30px;
    background: #3385ff;
    color: #fff;
    cursor: pointer;
}

#textBut:hover {
    background: #4e6ef2
}

.result {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 30px
}

#leftTextarea, #rightTextarea {
    width: 390px;
    height: 200px;
    font-size: 18px;
    line-height: 25px;
    padding: 10px;
    border-radius: 16px;
    overflow: visible;
    outline: 0;
    margin-right: 20px;
    resize: none
}

#rightTextarea {
    background: #f0f0f0
}

#leftTextarea:focus {
    border: 1px solid #3385ff;
    outline: 0
}

/*.name-box {*/
/*    width: 100px;*/
/*    color: #f73131;*/
/*    font-size: 17px;*/
/*    font-weight: 500*/
/*}*/

/*#content {*/
/*    min-width: 600px*/
/*}*/

/*#contentInput, #humpInput, #underlineInput,#allCapitalizedInput, #_allCapitalizedInput, #titleCaseInput,#_titleCaseTextInput {*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    opacity: 0;*/
/*    z-index: -10*/
/*}*/

.invisible {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -10
}

#all-box {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

    /* margin-top:4rem; */
    width: 100%;
    /*height: 100vh;*/
   /* display: flex;
    justify-content: center; */
    /*align-items: center*/
}

/*.spacerBut, .spacerButOne, .spacerButTwo, .spacerButThree,.spacerButFour,.spacerButFive,.spacerButSix,.spacerButSeven {*/
/*    width: 60px;*/
/*    height: 30px;*/
/*    line-height: 30px;*/
/*    color: #3385ff;*/
/*    font-size: 14px;*/
/*    text-align: center;*/
/*    border-radius: 10px;*/
/*    border: 1px solid #3385ff;*/
/*    cursor: pointer;*/
/*    transition: transform 1s;*/
/*}*/

/*.spacerBut:hover {*/
/*    width: 60px;*/
/*    height: 30px;*/
/*    line-height: 30px;*/
/*    color: #fff;*/
/*    font-size: 14px;*/
/*    text-align: center;*/
/*    border-radius: 10px;*/
/*    border: 1px solid #3385ff;*/
/*    background: #3385ff;*/
/*    cursor: pointer;*/
/*}*/

#search {
    height: 64px;
    width: 150px;
    text-align: center;
    cursor: pointer;
    background: #3385ff;
    border-radius: 0 20px 20px 0;
    margin-top: 40px;
    line-height: 64px;
    color: #fff
}

#search:hover {
    background: #4e6ef2
}

#transformation {
    transition: transform 1s;
    cursor: pointer;
}

/*.spacerButOne:hover {*/
/*    width: 60px;*/
/*    height: 30px;*/
/*    line-height: 30px;*/
/*    color: #fff;*/
/*    font-size: 14px;*/
/*    text-align: center;*/
/*    border-radius: 10px;*/
/*    border: 1px solid #3385ff;*/
/*    background: #3385ff;*/
/*    cursor: pointer;*/
/*    transition: transform 1s*/
/*}*/

/*.spacerButTwo:hover {*/
/*    width: 60px;*/
/*    height: 30px;*/
/*    line-height: 30px;*/
/*    color: #fff;*/
/*    font-size: 14px;*/
/*    text-align: center;*/
/*    border-radius: 10px;*/
/*    border: 1px solid #3385ff;*/
/*    background: #3385ff;*/
/*    cursor: pointer;*/
/*    transition: transform 1s*/
/*}*/

/*.spacerButThree:hover {*/
/*    width: 60px;*/
/*    height: 30px;*/
/*    line-height: 30px;*/
/*    color: #fff;*/
/*    font-size: 14px;*/
/*    text-align: center;*/
/*    border-radius: 10px;*/
/*    border: 1px solid #3385ff;*/
/*    background: #3385ff;*/
/*    cursor: pointer;*/
/*    transition: transform 1s*/
/*}*/


.active {
    transform: rotateY(180deg)
}

.clickLeft {
    transform: translateX(130px)
}

.clickRight {
    transform: translateX(-130px)
}

.disappear {
    display: none
}

.spinner {
    position: absolute;
    left: 47%;
    top: 46%;
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 10px;
    display:none;
}

.spinner > div {
    /*background-color: #3385ff;*/
    height: 100%;
    width: 6px;
    display: inline-block;
    -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
    animation: stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect1 {
    -webkit-animation-delay: -1.2s;
    animation-delay: -1.2s
}
.spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s
}

.spinner .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s
}

.spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s
}

.spinner .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s
}

@-webkit-keyframes stretchdelay {
    0%, 40%, 100% {
        -webkit-transform: scaleY(0.4)
    }
    20% {
        -webkit-transform: scaleY(1.0)
    }
}

@keyframes stretchdelay {
    0%, 40%, 100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4)
    }
    20% {
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0)
    }
}

.empty-box {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    right: 210px;
    top: 56px;
    margin-top: 3px;
    cursor: pointer;
    transition: transform .4s;
    transform: rotate(0deg)
}

.empty-box:hover {
    transform: rotate(90deg);
    background: #9ac0cd
}

.logo {
    display: flex;
    justify-content: center;
    cursor: default;
}

.L, .o, .u, .h, .c {
    font-size: 70px;
    font-weight: 600
}

.L, .h {
    color: #2d85f0
}

.o {
    color: #f4433c
}

.u {
    color: #ffbc32
}

.c {
    color: #0aa858
}

.record-number{
    position: fixed;
    bottom: 0;
    text-align: center;
    font-size: 14px;
    color: #bbb;
    width: 97%;
    padding: 20px;
    background: #ffffff;
}
/*style="text-align: center;margin: 20px 0;color: #bbb;"*/