@keyframes search-popup-open {
    from {
        transform: translateX(100%);
        opacity: 0.5;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes search-popup-close {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0.5;
    }
}
.popup-search {
    animation: search-popup-open 300ms ease; position: fixed; inset: 0px; background-color: rgb(255, 255, 255); z-index: 9999; display: none;
}
.popup-search .popup-form{width: 100%; height: 50px; background-color: rgb(245, 245, 245); display: flex; flex-flow: row; align-items: center;}
.popup-search .search-popup-icon {
    color: #666;
    font-size: 25px;
    line-height: 50px;
    padding: 0 15px
}
.popup-search .search-popup-icon.fa-search {
    color: #999;font-size: 16px; line-height: 26px; padding: 0px 0px 0px 10px;

}
.popup-search .search-popup-button{line-height: 50px; border: medium; outline: none; background-color: transparent; color: rgb(41, 121, 255); font-size: 14px; padding: 0px 10px; transition: opacity 0.3s;}
.popup-search .search-popup-button:active {
    opacity: 0.4;
}
.popup-search .search-popup-input {
    border-color: transparent;
    border-style: solid;
    border-width: 1px;
    transition: border-color 0.2s ease;
    flex: 1 1 0%; height: 30px; line-height: 30px; display: flex; flex-flow: row; background-color: rgb(255, 255, 255); border-radius: 25px;

}
.popup-search .search-popup-input:focus-within {
    border-color: #fbb92a;
}
.popup-search .search-popup-input:focus-within .search-popup-icon.fa-search {
    color: #fbb92a;
}

.popup-search .search-popup-input input{flex: 1 1 0%; outline: none; border: medium; background-color: transparent; font-size: 14px; padding-left: 10px; padding-right: 10px; color: rgb(51, 51, 51);}

.popup-search .search-block-top {
    width: 100%;
    height: 40px;
    display: flex;
    flexDirection: row;
    flexWrap: nowrap;
    alignItems: center;
}
.popup-search .search-block-top .fa-trash{font-size: 18px; color: rgb(153, 153, 153); padding: 0px 5px;}


.popup-search .search-block-top-title {
    flex: 1;
    fontSize: 16px;
    fontWeight: bold;
    color: #333;
}
.popup-search .search-block-bottom {
    width: 100%;
    minHeight: 50px;
}

.popup-search .search-history-item {
    display: inline-block;
    line-height: 18px;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 15px;
    white-space: nowrap;
    margin: 0 15px 15px 0;
    background-color: #f5f5f5;
    color: #666;
}

.popup-search .search-history-item:nth-of-type(1) {background-color: rgb(254, 238, 238); color: rgb(249, 65, 80);}
.popup-search .search-history-item:nth-of-type(2) {background-color: rgb(255, 239, 231); color: rgb(255, 105, 45);}
.popup-search .search-history-item:nth-of-type(3) {background-color: rgb(255, 242, 225); color: rgb(255, 160, 62);}


.popup-search .search-container-no-data {
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #999;
    font-size: 14px;
}