.alert-users {
    margin-top: 180px;
    position: absolute;
    right: 30px;
}
.alert-users__body {
    position: relative;
}
.alert-users__icon {
    position: relative;
    font-size: 3rem;
    color: var(--primary-color);
    width: 48px;
    height: 48px;
    cursor: pointer;
    background: #ffffffe6;
    border-radius: 50%;
}

.alert-users__text {
    position: absolute;
    right: 0;
    font-size: 20px;
    border-radius: 4px;
    transition: var(--transition);
    width: 0;
    height: 0;
    overflow: hidden;
    transform: translate(-40px, 0px);
    background: #fff;
    color: var(--gray-color);
    font-weight: 600;
}

.alert-users__text.active {
    width: 600px;
    height: 160px;
    padding: 20px;
}

@media (max-width: 768px) {
    .alert-users {
        margin-top: 4px;
        left: 45px;
        right: unset;
    }
    .alert-users__icon {
        font-size: 1.7em;
    }
    .alert-users__text {
        right: unset;
        left: 0;
        font-size: 14px;
    }
    .alert-users__text.active {
        width: 320px;
        border: 1px solid #ebebeb;
    }
}