.history-container {
    display: flex;
    align-items: center;
    margin-top: -20px;
    padding:20px 0;
    border-bottom: 1px solid $border-color;

    .btn-history {
        position: relative;
        bottom: -1px;
        .history-link {
            padding: 0 15px;
            height: 40px;
            display: inline-block;
            text-align: center;
            line-height: 40px;
            border: 1px solid $border-color;
            color: #424B4B;
            text-decoration: none;
            margin-right: 7px;
            border-radius: 4px;

        }
        &:hover{
            .history-link{
                border-color: #49A5FB;
                color: #49A5FB;
            }
        }

        &.active{
            .history-link{
                border-color: #49A5FB;
                color: #49A5FB;
            }
        }

        .history-close {
            font-size: 20px;
            position: absolute;
            top: -5px;
            right: 0;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #49A5FB;
            background-color: #fff;
            color: red;
            z-index: 2;
            opacity: 0;
            transform: scale(0);
            visibility: hidden;
            transition: 0.15s all ease;

            &:hover {
                border: 1px solid red;
                background-color: red;
                color: #fff;
            }
        }

        &:hover {
            .history-close {
                opacity: 1;
                transform: scale(1);
                visibility: visible;
            }
        }
    }
}