@media(max-width:768px) {
    .search-icon {
        display: none
    }
}

@media(min-width:769px) {
    .searchmodal {
        position: fixed;
        z-index: 102;
        backdrop-filter: blur(5px);
        left: 0;
        top: 70px;
        width: 100%;
        height: 250px;
        border-bottom: 2px solid var(--bottom-line-table);
        background: var(--modal-bg);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-30px);
        transition: visibility 0s linear .25s, opacity .25s 0s, transform .25s
    }

    .modal-searchcontent {
        top: 6px;
        left: 0
    }

    .show-searchmodal {
        z-index: 102;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: visibility 0s linear 0s, opacity .25s 0s, transform .25s
    }

    .modal_users_container {
        opacity: 0;
        transition: .3s
    }

    .modal-searchcontent {
        z-index: 2;
        position: absolute;
        display: flex;
        gap: 15px
    }

    .modal_users_container {
        top: 68px;
        z-index: 200;
        opacity: 0;
        visibility: hidden;
        position: absolute
    }

    .modal_users_header {
        display: flex;
        gap: 10px;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        color: var(--custom-text-color);
        background-color: var(--grey-color);
        justify-content: center;
        align-items: center;
        padding: 10px;
        border-radius: 4px
    }

    .modal_users_header svg {
        width: 10px;
        height: auto;
        fill: var(--span-color);
        opacity: .7
    }

    .modal_users_header b {
        color: var(--span-color);
        font-weight: 700
    }

    .users_notfound .modal-searchcontent {
        transition: .3s
    }

    .users_notfound .modal_users_container {
        transform: translateY(0);
        transition: .3s;
        opacity: 1
    }

    .users_notfound .modal_users_header svg {
        fill: var(--red-color);
        opacity: 1
    }

    .users_found .modal-searchcontent {
        transition: .3s
    }

    .users_found .modal_users_container {
        transform: translateY(0px);
        transition: .2s;
        opacity: 1;
        visibility: visible
    }

    .modal_users_container .modal_blocks_content {
        margin-top: 5px;
        display: flex;
        gap: 5px;
        max-height: 155px;
        width: 260px;
        overflow-y: scroll;
        padding: 5px;
        border-radius: 12px;
        background-color: var(--grey-color);
        box-shadow: 0 0 38px 0 rgb(0 0 0/20%);
        flex-direction: column
    }

    .users_notfound .modal_blocks_content {
        opacity: 1;
        visibility: visible;
        z-index: 0
    }

    .modal_users_container .modal_blocks_content::-webkit-scrollbar {
        background: rgb(255 255 255/5%);
        width: 2px
    }

    .modal_users_container .modal_blocks_content::-webkit-scrollbar-thumb {
        border: none !important;
        background: var(--span-color)
    }

    .modal_users_container .modal_blocks_content a {
        display: flex;
        align-items: center;
        border-radius: 8px;
        position: relative;
        gap: 10px;
        background-color: var(--button-color);
        transition: .3s;
        padding: 5px
    }

    .modal_users_container .modal_blocks_content a:hover {
        transition: .3s;
        background-color: var(--button-color-hover)
    }

    .modal_users_container .modal_blocks_content a>svg {
        width: 18px;
        height: auto;
        position: absolute;
        right: 14px;
        fill: var(--custom-text-color);
        opacity: .2;
        transition: .3s
    }

    .modal_users_container .modal_blocks_content a:hover>svg {
        opacity: 1;
        fill: var(--span-color);
        transition: .3s
    }

    .modal_users_container .modal_blocks_content a img {
        height: 35px;
        width: 35px;
        border-radius: 4px
    }

    .modal_users_container .modal_blocks_content a h3 {
        margin-bottom: 1px;
        font-size: 12px;
        max-width: 145px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .modal_users_container .modal_blocks_content a p {
        color: var(--custom-text-color);
        margin: 0;
        font-size: 9px
    }
}

form.input-form {
    width: 260px !important;
    margin-top: 0 !important
}

.load svg {
    width: 12px;
    height: 12px;
    fill: var(--orange-color) !important;
    animation: 1s linear 0s normal none infinite running loading;
    -webkit-animation: 1s linear 0s normal none infinite running loading
}

@keyframes loading {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@-webkit-keyframes loading {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

.load {
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--custom-text-color)
}

.hide_block_players {
    transform: translateY(-200px) !important;
    transition: .15s !important
}