.contentEditableWithCount {
/*    height: 56px;*/
}
    .contentEditableWithCount .contentBlockPane {
        padding: 8px 15px;
        border: 1px solid #C9C9C9;
        border-color: var(--color_C9C9C9);
        box-sizing: border-box;
        border-radius: 18px;
    }

    .contentEditableWithCount .countPane {
        font-size: 12px;
        line-height: 14px;
        letter-spacing: 0;
        color: #7F7F7F;
        color: var(--color_7F7F7F);
        float: right;
        margin-top: 4px;
    }

.contentBlock {
    border: 0;
    font-size: 14px;
    line-height: 16px;
    width: 100%;
    text-align: left;
}

    .contentBlock .contentEditBox {
        color: #373737;
        color: var(--color_373737);
        position: relative;
        z-index: 2;
        white-space: pre-wrap;
        word-wrap: break-word;
        cursor: text;
        overflow-x: hidden;
        min-height: 16px;
    }

        .contentBlock .contentEditBox:focus {
            outline: 0;
        }

    .contentBlock .contentEditPlaceholder {
        color: #c9c9c9;
        color: var(--color_C9C9C9);
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        height: 100%;
    }
    /*處理div[contenteditable]換行樣式*/
    .contentBlock .contentEditBox p,
    .contentBlock .contentEditBox div {
        padding: 0;
        margin: 0;
    }

    .contentBlock [contenteditable="true"].singleLine {
        white-space: nowrap;
        overflow: hidden;
    }

        .contentBlock [contenteditable="true"].singleLine br {
            display: none;
        }

        .contentBlock [contenteditable="true"].singleLine * {
            display: inline;
            white-space: nowrap;
        }

/*搜索輸入框*/
.e8dSearchContentEditBox {
    position: relative;
    background: #F5F5F5;
    height: 30px;
    padding: 0 32px 0 32px;
}

    .e8dSearchContentEditBox:before {
        content: '';
        width: 0;
        height: 100%;
        display: inline-block;
        vertical-align: middle;
    }

    .e8dSearchContentEditBox:hover {
        padding-right: 32px;
    }

        .e8dSearchContentEditBox:hover .delBtn {
            opacity: 0.6;
        }

    .e8dSearchContentEditBox .delBtn {
        z-index: 2;
        display: block;
        width: 16px;
        height: 16px;
        position: absolute;
        right: 8px;
        /*top: 7px;*/
        cursor: pointer;
        /*text-align: center;*/
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url(../Images/btn_contacts_del.png);
        opacity: 0;

        /*這個方法會設定 top 和 bottom 的位置，讓它不可能符合，再透過 margin 的方式，讓它變成垂直置中*/
        top: 0;    
        bottom: 0;
        margin: auto;
    }

        .e8dSearchContentEditBox .delBtn:hover {
            opacity: 1;
        }

    .e8dSearchContentEditBox.withoutSearchBtn {
        padding-left: 12px;
    }

    .e8dSearchContentEditBox.withoutDeleteBtn {
        padding-right: 12px;
    }


    .e8dSearchContentEditBox .searchContentBlock {
        display: inline-block;
        vertical-align: middle;
    }

    .e8dSearchContentEditBox .searchIcon {
        width: 16px;
        height: 16px;
        position: absolute;
        
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url(../Images/btn_search.png);
        opacity: 0.5;

        top: 0;
        bottom: 0;
        left: 12px;
        margin: auto;
    }

    .e8dSearchContentEditBox.isFocus .contentEditBox {
        color: #5b5b5b;
        color: var(--color_5B5B5B);
    }

    .e8dSearchContentEditBox .contentEditPlaceholder {
        color: #C9C9C9;
        color: var(--color_C9C9C9);
    }

    .e8dSearchContentEditBox.isFocus .contentEditPlaceholder {
        color: #919191;
        color: var(--color_919191);
    }

    .e8dSearchContentEditBox.isFocus .searchBtn {
        opacity: 1;
    }