::-webkit-file-upload-button {cursor: pointer}
::-webkit-scrollbar {width: 0}
::-webkit-scrollbar-track {background: transparent}
::-webkit-scrollbar-thumb {background: rgba(255, 255, 255, 0.1)}
* {-ms-overflow-style: none;scrollbar-width: none}

@media (min-width: 992px) {
    .footer {
        display: none !important;
    }
}

@-webkit-keyframes send-message-anim {
    0% {opacity: 50%}
    100% {transform: scale(0.8);opacity: 100%}
}

@keyframes send-message-anim {
    0% {opacity: 50%}
    100% {transform: scale(0.8);opacity: 100%}
}

.send-message-anim {
    -webkit-animation: send-message-anim 0.5s linear infinite alternate;
    animation: send-message-anim 0.5s linear infinite alternate;
}

.header {
    position: fixed !important;
    top: 0;
    z-index: 1;
}

.footer, .footer-btns {
    display: none !important;
}

.chat {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.chat, .chat-header, .chat-messages, .chat-bottom {
    max-width: 980px;
    margin: 0 auto;
}

.chat-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #f6f6f661;
    padding: 40px;
    margin: -65px 0 0;
    box-shadow: 0 0px 20px 0 #cccccc;
    border-radius: 20px;
}

.chat-info > div > .btn-primary, .chat-info > .btn-primary, .btn-search-blocked {
    min-width: 250px;
    margin: 10px 0 0;
}

.chat-info > div > .btn-primary:first-child, .chat-info > .btn-primary:first-child {
    margin: 0;
}

.chat-info > h3 {
    max-width: 555px;
    text-align: center;
    font-size: 1.3rem;
    color: #161616;
    margin: 0 0 30px;
}

.chat-info-desc {
    display: block;
    text-align: center;
    margin: -25px 0 25px;
    color: #646464;
    font-size: 0.8rem;
    max-width: 270px;
    line-height: 20px;
}

.chat-info-attempts {
    text-align: center;
    margin: 10px 0 -10px;
    font-size: 0.8rem;
    color: #333;
}

.chat > .search-filter {
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.chat > .search-filter > form > .modal-close {
    position: unset;
    float: right;
}

#search_limit {
    display: block;
    font-size: 0.950rem;
}

#change_search_filter {
    text-align: center;
    font-size: 0.8rem;
    display: block;
    color: #776198;
    margin: 10px 0 0;
}

#change_search_filter:hover {
    color: #6626c7;
}

#search-filter-reset {
    max-width: 40px;
    justify-content: center;
}

#send {
    border-radius: 8px !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    background: linear-gradient(214deg, #8d00ff 0%, #6a05ff 75%) !important;
    width: 50px;
}

#send:hover {

}

#send:active {
    box-shadow: unset !important;
}

#peer_typing {
    color: #ddd;
}

.search-loader {
    background: url(/assets/img/search-loader.svg) no-repeat center center;
    background-size: cover;
    height: 140px;
    width: 140px;
    margin: -20px 0 20px
}

.search-loader::after {
    color: #565656;
    margin: 120px 0 0;
    text-align: center;
    font-size: 0.725rem;
    display: block;
    content: "поиск собеседника";
}

.chat-area {
    display: none;
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    box-shadow: 0 0 12px 4px #ddd6eb;
    border-radius: 10px 10px 0 0;
}

.chat-header {
    display: flex;
    margin: 0 auto;
    padding: 15px 20px;
    width: 100%;
    background: #fff;
    z-index: 111111111;
    flex-wrap: nowrap;
    flex-direction: row;
    color: #3e3e3e;
    font-weight: 600;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    box-shadow: 0 0 3px #d5c0fe;
}

.chat-header-user {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
}

.chat-header-user-info {
    font-size: 0.7rem;
    color: #525252;
    display: block;
    font-weight: bold;
}

.chat-header-user-info-sex-М {
    color: #783bf9;
}

.chat-header-user-info-sex-Ж {
    color: #fc109c;
}

.chat-header-user-icon {
    display: flex;
    padding: 0 3px 0 0;
}

.chat-header-user-icon-online {
    color: #00a540;
}

.chat-header-user-icon-inactive {
    color: #FFC107;
}

.chat-header-user-icon-offline {
    color: #f81717;
}

.chat-header-user-name > span {
    vertical-align: middle;
}

.btn-primary-mobile-send > i {
    padding: 0 15px;
}

.chat-bottom {
    width: 100%;
    bottom: 0;
    background-color: #ffffff;
    padding: 10px 10px 10px 0;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    position: fixed;
    overflow: hidden;
    box-shadow: 0 0 3px #d5c0fe;
}

.chat-bottom-right {
    display: flex;
}

#input_chat_message {
    box-shadow: unset;
    background: #ffffff;
    font-size: 0.8rem;
    padding: 12px;
    margin: 0;
    border: none;
    -moz-appearance: none;
    resize: none;
    outline: 0;
}

.chat-bottom-attach {
    color: #673AB7;
    padding: 10px 0 0 14px;
    font-weight: 400;
    font-size: 1.2rem;
}

.chat-bottom-attach:hover {
    color: #5c00ff;
}

.chat-bottom-attach input {
    opacity: 0;
    width: 45px;
    height: 60px;
    cursor: pointer;
    position: absolute;
    border: unset;
    box-shadow: unset;
    left: 0;
    top: 0;
    padding: 0;
    margin: 0;
}

.chat-system-block {
    margin: 20px 0;
    max-width: 550px;
}

.chat-system-block > .chat-message-content {
    max-width: fit-content;
    padding: 20px;
}

.chat-system-block-title {

}

.chat-system-block-title > h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #000000;
}

.chat-system-block-abuse {
    font-size: 0.7rem;
    color: #a4a4a4;
    text-decoration: underline;
    font-weight: 400;
}

.chat-system-block-abuse:hover {
    cursor: pointer;
}

.chat-system-block-btns {
    margin: 15px 0 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.chat-system-block-btns > button {
    margin: 7px;
    background: #fff;
    color: #404040;
    font-size: 0.8rem;
    transition: none;
    box-shadow: 0 2px 6px 0 #dedede !important;
}

.chat-system-block-btns > button:first-child {
    background: linear-gradient(225deg, #7100ff 0%, #a000ff 75%);
    box-shadow: 0 2px 7px 0 #c18cde !important;
    color: #fff;
}

.chat-system-block-btns > button:focus,
.chat-system-block-btns > button:focus a,
.chat-system-block-btns > button:hover a {
    color: #fff;
}

.chat-system-block-btns > button > a {
    color: #404040;
    text-decoration: none;
}

.chat-system-block-btns > button > i {
    /*color: #a6a6a6;*/
}

.chat-messages {
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 1;
    flex-wrap: nowrap;
    padding: 70px 12px;
    flex-direction: column-reverse;
    align-items: flex-start;
    background: #f8f7fa;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    overflow-x: hidden;
    outline: none;
}

.chat-message {
    width: 100%;
    margin: 6px 0;
    display: none;
    min-width: 150px;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    align-items: center;
}

.chat-message-female {
    background: #c551c1 !important;
}

.chat-message-img {
    margin: -17px;
    position: relative;
    min-width: 200px;
    min-height: 200px;
}

.chat-message-img > img {
    width: 100%;
    height: 100%;
    min-height: 200px;
    max-height: 440px;
    object-fit: cover;
    max-width: 490px;
    position: relative;
    z-index: 0;
}

.chat-message-content {
    max-width: 80%;
    background: #6b36d9;
    padding: 8px 15px 10px 16px;
    word-break: break-word;
    overflow: hidden;
    border-radius: 25px 3px 25px 25px;
    color: #fefefe;
    font-size: 0.9rem;
    font-weight: 700;
    text-shadow: 0 0 1px #150037;
    box-shadow: 0 2px 2px 0 #dddddd;
    height: 100%;
    min-height: 100%;
}

.chat-message-peer {
    display: flex;
    flex-direction: row !important;
}

.chat-message-peer > .chat-message-content {
    border-radius: 3px 20px 20px 20px !important;
    background: #fff;
    border: 1px solid #ededed;
    color: #443b53;
    text-shadow: unset !important;
}

.chat-message-system {
    width: 100%;
    text-align: center;
}

.chat-message-system > .chat-message-content {
    color: #a0a0a0 !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    border-radius: 0 !important;
    background: unset !important;
    box-shadow: unset !important;
    border: unset !important;
    padding: 2px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    text-shadow: unset !important;
}

.chat-search-info {
    font-size: 0.8rem;
}

.chat-search-info > hr {
    border: 1px solid #fff;
    width: 0;
}

.chat-search-info > div {
    display: flex;
    justify-content: space-between;
    padding: 1px 0;
    width: 205px;
    flex-direction: row;
    align-items: stretch;
    margin: auto;
}

.chat-search-info > div > span {
    color: #673AB7;
}

.chat-image-need-vip {
    height: 100%;
    width: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    text-align: center;
    word-break: break-word;
    flex-direction: column;
    flex-wrap: nowrap;
    background: #f6e3ff87;
    z-index: 1;
}

.chat-image-need-vip > p {
    color: #fff;
    background: linear-gradient(50deg, #7505de 0%, #e128ff 100%) !important;
    padding: 15px 15px;
    line-height: 26px;
    width: 100%;
    font-weight: 700;
    border-radius: 5px;
    max-width: 260px;
    font-size: 0.85rem;
    text-transform: uppercase;
    text-shadow: 0 2px 2px #673AB7;
}

.btn-primary.vip-image__buy {
    box-shadow: 0 3px 12px 0 #61437c !important;
    margin: 0 auto;
}

.chat-image-need-vip-blur {
    filter: blur(5px);
    -webkit-filter: blur(5px);
}

.chat-page {
    padding: 5px;
    max-width: 960px;
    min-width: 250px;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.chat-page-header {
    margin: 80px 10px 0;
    text-align: center;
    font-size: 1.2rem;
}

.chat-page-items {
    padding: 5px;
    max-width: 960px;
    min-width: 250px;
    margin: 0 auto;
    justify-content: space-evenly;
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-between;
}

.chat-page-item {
    margin: 7px;
    padding: 7px;
    font-size: .9rem;
    min-width: 220px;
    max-width: 260px;
    border-radius: 7px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;

    img {
        width: 100%;
        border-radius: 7px 7px 0 0;
    }

    &:hover {
        background: linear-gradient(-225deg, #6915ff 0%, #a500ff 100%);
    }
}

.dialog-info {
    display: flex;
    flex-direction: column;
}

.dialog-date {
    display: flex;
    justify-content: space-around;
    font-size: 0.8rem;
    color: #eee;
    flex-direction: row;
    width: 100%;
    margin: 8px 0 2px;
}

.dialog-date > span, .dialog-info > span {
    padding: 1px 0;
}

.abuse-list {
    background: #fcfcfc;
    padding: 10px;
    border-radius: 10px;
    font-size: 0.9rem;
    box-shadow: 0 0 11px 0 #cfcfcf;
}

.abuse-list > li {
    color: #404040;
    background: #fff;
    font-size: 0.85rem;
    text-align: left;
    padding: 12px;
    margin: 10px 7px;
    box-shadow: 0 0 8px 0 #e7e7e7;
    border-radius: 8px;
}

.abuse-list > li:hover, .abuse-target {
    background: linear-gradient(225deg, #7100ff 0%, #a000ff 75%) !important;
    color: #fff !important;
    border-radius: 10px !important;
    cursor: pointer !important;
}

.abuse-list > li:hover i, .abuse-target > i {
    color: #fff !important;
}

.abuse-list > li > i {
    padding: 0 10px 0 0;
    color: #673AB7;
    font-size: 0.5rem;
    vertical-align: middle;
}

.abuse-btn {
    margin: 10px 0 30px;
    width: 100%;
}

.abuse-other > h4 {
    margin: 10px 0 5px;
}

.abuse-other > div {
    font-size: 0.8rem;
    color: #999;
    display: block;
    margin: -5px 0 5px;
}

.abuse-other > textarea {
    border-radius: 10px;
    border: 2px solid #a26eff;
    height: 140px;
    max-width: 100%;
    width: 100%;
    resize: none;
    padding: 15px;
    margin: 0 0 5px;
    font-size: 0.9rem;
    outline: none;
}

.abuse-other > textarea:focus {
    border: 2px solid #a26eff;
}

#welcome_message {
    background: #fff !important;
    padding: 20px 0 15px 20px !important;
    border-radius: 10px !important;
    box-shadow: 0 0 9px 0 #cecece !important;
    max-width: max-content;
    margin: 0 auto;
}

.welcome-message-title {
    font-weight: 500;
    font-size: 1rem;
    color: #434343;
    margin: 0 0 4px;
    text-align: left;
}

.welcome-message-title-desc {
    text-align: left;
}

.welcome-message-btns {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow: scroll;
}

.welcome-message-btns > button {
    min-width: max-content;
    margin: 8px 4px;
    box-shadow: 0 2px 2px 0 #af9cba;
    padding: 8px;
    border: 0;
    border-radius: 10px;
    line-height: 1rem;
    cursor: pointer;
}

.welcome-message-btns > button:first-child {
    margin: 8px 4px 8px 0;
}

.welcome-message-btns > button:last-child {
    margin: 8px 18px 8px 4px;
}