* {
    margin: 0;
    padding: 0;
}

.rfl-header {
    height: 10%;
    padding: 16px 24px;
    border-radius: 4px 4px 0 0;
    background: #fff;
    color: rgba(0, 0, 0, 0.65);
    border-bottom: 1px solid #e8e8e8;
    input {
        margin: 0;
        font-size: 16px;
        line-height: 22px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
        padding: 0px 24px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        list-style: none;
        position: relative;
        display: inline-block;
        padding: 4px 11px;
        width: 100%;
        height: 32px;
        font-size: 14px;
        line-height: 1.5;
        color: rgba(0,0,0,.65);
        background-color: #fff;
        background-image: none;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        -webkit-transition: all .3s;
        transition: all .3s;
        &::placeholder {
            color: #bfbfbf;
        }
        &:hover, &:focus {
            border-color: #40a9ff;
            border-right-width: 1px!important;
            outline: 0;
            -webkit-box-shadow: 0 0 0 2px rgba(24,144,255,.2);
            box-shadow: 0 0 0 2px rgba(24,144,255,.2);
        }
    }
}

.rfl-body {
    height: 90%;
    margin: 16px;
    overflow-y: auto;
    padding: 24px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
}

.rfl-icon {
    display: inline-block;
    border-radius: 4px;
    padding: 8px;
    text-align: center;
    cursor: pointer;
    &-top {
        transition: .5s ease;
        color: inherit;
        background-color: transparent;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        i {
            margin: 8px 0 8px 0;
        }
        &:hover, &:focus {
            background-color: #4dabf7;
            color: #fff;
        }
    }
    &-bottom {
        transition: .5s ease;
        color: #adb5bd;
        font-size: .8rem;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        &:hover, &foucs {
            background-color: rgba(0, 0, 0, .2);
            color: #495057;
        }
    }
    &.selected {
        .rfl-icon-top {
            background-color: #4dabf7;
            color: #fff;
        }
        .rfl-icon-bottom {
            background-color: rgba(0, 0, 0, .2);
            color: #495057;
        }
    }
}