p.done {color: #7f7f7f;}
p.done:after {
    content: " - готово";
    font-weight: bold;
    color: #444;
}


.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}

.card .card-body {
    padding: 20px;
}


.mainControl {flex-wrap: wrap;}


.results .grid, .results .albums .album__photos {display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;}

.results .grid .item {padding-bottom: 10px;text-align: center;  }
.results .grid .item .photo100{ max-height: 100px;}

.results .grid .item p {line-height: 20px;}

.results .friendsList .friend {flex-basis: 120px;}

.results .groups .group {    flex-basis: 180px; padding: 0 10px 10px;}

.results .allphotos .photoInBanch ul {text-align: left;}
.results .allphotos .item p { max-width: 200px;}

.results .photo_desc {display: flex; flex-wrap: wrap; flex-direction: row;align-items: center;}
.results .photo_desc img {margin-right: 10px;}

.results .photo_info {background-color: rgba(255, 255, 255, 0.83);
    padding: 4px 0;
    /* height: 100%; */
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    width: 100%;
    justify-content: center;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;}

.results .photo_info > div {color: #8e97a1; background-repeat: no-repeat;
    padding-left: 30px;
    font-weight: 500;
    margin: 0 8px;}
.results .photo_info .like {background-image: url(../img/ico/vk_like.svg);}
.results .photo_info .repost {background-image: url(../img/ico/vk_share.svg);}
.results .photo_info .comments {background-image: url(../img/ico/vk_comment.svg);}


.results .photo_text {font-size: 18px;margin-bottom: 0px;height: 25px;
    overflow: hidden;
    padding: 0 20px;
    transition: all 0.5s ease-out;}
.results .photo_text:first-letter {text-transform: uppercase; font-weight: bold; color: #8322b5;}
.results .photo_text.filled {background-color: rgba(255, 255, 255, 0.83);  }
.results .albums .album__photos .photo:hover .photo_text {height: 120px;}




.results .photo_comments {font-size: 16px;}
.results .photo_comments .comment {display: flex;flex-wrap: wrap;padding: 6px 0 12px;    border-bottom: 3px dotted #eee;}
.results .photo_comments .comment:nth-child(even) {background-color: #f3f2f9; }

.results .photo_comments .comment .fromImg{width: 50px; padding-right: 8px; border-radius: 100px;}
.results .photo_comments .comment .text {width: 120px;    text-align: left;}
.results .photo_comments .comment .text p:first-child {font-style: italic;}
.results .photo_comments .comment .text p {margin-bottom: 2px;}
.results .photo_comments .comment .text .fromName {padding-right: 14px;}



.results .albums {flex-direction: column;}
.results .albums .album {padding-bottom: 40px;}
.results .albums .album .h3 {text-align: left;}
.results .albums .album .h3:first-letter {text-transform: uppercase;}
.results .albums .album .h3 span {font-size: 20px; color: #888;}


.results .albums .album .albumSortControl  {display: flex;
    flex-direction: row;
    align-items: center;
    margin: 8px 0;
    flex-wrap: wrap;
}
.results .albums .album .albumSortControl .h5 {margin: 0 10px 0 0;}
.results .albums .album .albumSortControl .btn {padding: 5px; font-size: 16px;}

.albumSortControl .btn[data-sortdir]::after {
    content: ' ';
    display: inline-block;
    width: 25px;
    height: 25px;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0 4px -6px 2px;
}

.albumSortControl .btn[data-sortdir=direct]::after { background-image: url(../img/ico/sort-from-small.png);  }
.albumSortControl .btn[data-sortdir=reverse]::after { background-image: url(../img/ico/sort-from-big.png);  }


.albumSortControl .albumSortBtns {flex-wrap: wrap;}


.results .albums .album__photos {justify-content: flex-start;display: flex;flex-wrap: wrap;}
.results .albums .album__photos a {text-decoration: none; color: #000;}
.results .albums .album__photos .photo {
    min-height: 180px;
    width: 230px;
    overflow: hidden; position: relative;
    border: 3px solid #888;
    transition: border-color 0.3s ease-out;
    border-radius: 8px;
    margin: 0 15px 20px 0;
    background-repeat: no-repeat;
    background-size: cover;
}
.results .albums .album__photos .photo:hover  {overflow: visible;    border-color: #8322b5;}
.results .albums .album__photos .photo .photo_comments {position: absolute;
    text-align: center; margin-top: -100%; opacity: 0;    width: 100%;
    transition: margin 0.4s ease-in, opacity 0.1s ease-out 0.2s;
    border: 4px solid #a169bd;
    background-color: #fff;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.results .albums .album__photos .photo:hover .photo_comments {
    transition: margin 0.4s ease-out, opacity 0.1s ease-out 0.2s;
    margin-top: 0;opacity: 1;
    z-index: 1000;
    box-shadow: 0px 4px 8px 4px rgba(51, 51, 51, 0.6);
}


.results .albums .album__photos .photo.extended_photo {width: 440px;}

.results .photo.extended_photo .photo_comments .comment .text {width: 320px;}

@media (max-width: 767px) {
    .mainControl {    flex-direction: column}

}