.buttons--line button {
    width: 240px;
    padding: 8px 0;
    text-align: center;
    border-radius: 20px;
    font-size: 1rem;
    border: 2px solid #878787;
    color: #878787;
    background: transparent;
}

.buttons--line {
    display: flex;
    gap: 20px;
    margin-top: 30px;
    margin-bottom: 15px;
}

.buttons--line button:hover ,
.buttons--line button.active {
    background: rgba(79, 168, 62, 1);
    color: white;
    border-color: rgba(79, 168, 62, 1);
}

.buttons--line button:last-child:hover ,
.buttons--line button:last-child.active {
    background: rgba(235, 102, 95, 1);
    color: white;
    border-color: rgba(235, 102, 95, 1);
}

.project--block {
    border: 1px solid rgba(135, 135, 135, 0.5);
    border-radius: 15px;
    padding: 30px;
    width: 976px;
}

header.project--header {
    display: grid;
    grid-template-areas: 
        "A B C"
        "A D C"
        "E D C"
    ;
    grid-template-columns: 180px 1fr 170px;
    position: relative;
}

.project--avatar-wrap {
    grid-area: A;
    position: relative;
}

.project--avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 30px;
}

.project--avatar img {
    object-fit: cover;
}

.app-badge {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 32px;
    height: 32px;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.app-badge.hidden {
    opacity: 0;
    pointer-events: none;
}

.app-badge img {
    width: 100%;
    height: 100%;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.app-badge:hover img {
    transform: scale(1.2) rotate(-10deg);
}

.app-badge:active img {
    transform: scale(0.9);
}

.project--title {
    grid-area: B;
    font-size: 1.35rem;
    max-width: 400px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow-y: hidden;
    color: rgba(74, 170, 60, 1);
    font-weight: 500;
    font-family: "TT-600";
}

@media (max-width: 1500px) {
    .project--title {
        max-width: 300px;
        
    }
}

@media (max-width: 900px) {
    .project--title {
        font-size: 1.125rem;
        
    }
}

.project--params {
    grid-area: D;
}

.project--controls {
    grid-area: C;
    padding-top: 42px;
}

.project--expand {
    grid-area: E;
}

ul.project--params {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 18px;
    max-width: 300px;
}

ul.project--params li {
    margin-bottom: 4px;
    color: rgba(135, 135, 135, 1);
    font-family: 'TT-500';
}

ul.project--params li b {
    color: black;
}

ul.project--params li span {
    border: 1px solid rgba(135, 135, 135, 1);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500; 
}

ul.project--params li:last-child {
    color: rgba(135, 135, 135, 1);
    font-weight: 700;
}

.project--controls button {
    border-radius: 5px;
    background: rgba(223, 237, 222, 1);
    width: 170px;
    height: 35px;
    display: flex;
    gap: 5px;
    border: 0;
    margin-bottom: 7px;
    font-weight: 400;
    font-size: 1rem;
}

.project--controls button:hover {
    transform: translateY(-1px);
    background: rgb(160, 221, 164);
    box-shadow: 0 3px 6px #808080;
}

.project--controls button:last-child {
    margin-bottom: 0;
}

.project--controls button img {
    width: 20px;
    height: 20px;
}

.project--controls button:nth-child(1):active,
.project--controls button:nth-child(4):active {
    color: black;
}

.project--controls button:nth-child(2) {
    background: rgb(224, 237, 223);
    color: black;
    font-weight: 400;
}

.project--controls button:nth-child(2):hover {
    background: rgb(160, 221, 164) !important;
    box-shadow: 0 3px 6px #808080;
}

.project--controls button:nth-child(3) {
    background: rgb(224, 237, 223);
    color: black;
    font-weight: 400;
}

.project--controls button:nth-child(3):hover {
    background: rgb(160, 221, 164);
    box-shadow: 0 3px 6px #808080;
}

.project--controls button:nth-child(4) {
    background: rgb(224, 237, 223);
}

.project--controls button:nth-child(4):hover {
    background: rgb(160, 221, 164);
    box-shadow: 0 3px 6px #808080;
}

button.project--expand {
    font-size: 1.125rem;
    color: rgb(152, 152, 152);
    font-family: 'TT-500';
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    max-width: 150px;
    margin-right: auto;
}

button.project--expand img {
    width: 20px;
    margin-left: 5px;
    font-family: 'TT-400';
}


@media (max-width: 1500px) {
    .project--block {
        width: 720px;
    }
}

@media (max-width: 1150px) {
    .project--avatar {
        width: 90px;
        height: 90px;
        margin-right: 0;
    }

    .project--block {
        padding: 15px;
        width: 600px;
    }

    button.project--expand {
        font-size: 0.875rem;
    }

    header.project--header {
    display: grid;
    grid-template-areas: 
        "A B C"
        "A D C"
        "E D C"
    ;
    grid-template-columns: 125px 1fr 170px;
}


}

@media (max-width: 1000px) {
    .project--block {
        width: 720px;
    }
}

@media (max-width: 750px) {
    header.project--header {
    display: grid;
    grid-template-areas: 
        "B B B"
        "A D C"
        "E D C"
    ;
}

ul.project--params {
    margin-top: 0;
    max-width: 200px;
}

.project--title {
    margin-bottom: 20px;
}

.project--block {
    width: 550px;
}
}

@media (max-width: 570px) {
    ul.project--params li {
        margin-bottom: 2px;
    }

    header.project--header {
        grid-template-areas: 
        "B B B"
        "A D D"
        "A D D"
        "C C E"
        ;
        grid-template-columns: 115px 1fr 115px;
    }

    .project--controls button {
        font-size: 0;
        gap: 0;
        width: 36px;
        height: 36px;
        border-radius: 7px;
    }

    .project--controls {
        display: flex;
        gap: 10px;
        margin-top: 15px;
    }

    .project--title {
        margin-bottom: 15px;
    }

    button.project--expand {
        height: 20px;
        margin-top: auto;
        margin-bottom: 5px;
    }

    .project--block {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .buttons--line button {
        font-size: 0.875rem;
    }

    .buttons--line {
        gap: 10px;
    }
} 

@media (max-width: 355px) {
    .project--avatar {
        width: 70px;
        height: 70px;
    }

    .project--controls button img {
        width: 16px;
        height: 16px;
    }

    .project--controls button {
        width: 28px;
        height: 28px;
    }

    .project--title {
        font-size: 0.875rem;
    }

    ul.project--params li {
        font-size: 0.875rem;
    }

    header.project--header {
        grid-template-columns: 90px 1fr 115px;
    }

    .buttons--line {
        flex-direction: column;
        align-items: center;
    }
}

nav.project--nav {
    display: flex;
    gap: 20px;
    margin-top: 40px;
}

button.project--nav--btn {
    border-radius: 10px 10px 0px 0px;
    background: rgba(225, 225, 225, 1);
    width: auto;
    color: rgba(154, 154, 154, 1);
    padding: 15px 18px;
    font-size: 1.25rem;
    font-family: 'TT-600';
    border-color: rgba(225, 225, 225, 1);
    position: relative;
    text-align: left;
    border-left: 1px solid rgba(0, 0, 0, 0);
    border-right: 1px solid rgba(0, 0, 0, 0);
    border-top: 1px solid rgba(0, 0, 0, 0);
    border-bottom: 0;
}

button.project--nav--btn:active {
    color: black;
}

button.project--nav--btn span {
    position: absolute;
    font-size: 1.25rem;
    color: white;
    font-family: 'TT-500';
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(133, 12, 239, 1);
    transform: translateY(-50%);
    top: -4px;
}

button.project--nav--btn.active {
    border-left: 1px solid rgba(198, 198, 198, 1);
    border-right: 1px solid rgba(198, 198, 198, 1);
    border-top: 1px solid rgba(198, 198, 198, 1);
    background: rgba(247, 247, 247, 1);
    color: black;
}

.project--content {
    border: 1px solid rgba(198, 198, 198, 1);
    border-radius: 0px 10px 10px 10px;
    background: rgba(247, 247, 247, 1);
    padding: 20px;
}

.rows--header, .rows--line {
    display: flex;
    gap: 15px;
}

.row--data {
    font-size: 0.875rem;
}

.row--data:nth-child(1) {
    width: 40px;
    display: block;
    min-width: 40px;
    font-size: 1rem;
}

.row--data:nth-child(2) {
    width: 125px;
    display: block;
    min-width: 125px;
    font-size: 0.875rem;
}

.rows--header .row--data {
    font-family: 'TT-600';
    font-size: 1rem;
}

.row--data:nth-child(3) {
    width: 35px;
    min-width: 35px;
    margin-left: 25px;
    margin-right: 30px;
}

.row--data:nth-child(4) {
    width: 185px;
    min-width: 185px;
    margin-right: 0px;
}

.row--data:nth-child(5) {
    width: 94px;
    min-width: 94px;
    margin-right: 60px;
}

.rows--header {
    margin-bottom: 15px;
}

.rows--line .row--data:nth-child(1) {
    color: rgba(133, 12, 239, 1);
    font-family: 'TT-600';
}

.row--bloger b {
    color: rgba(74, 170, 60, 1);
}

span.chat--icon {
    display: flex;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: rgba(74, 170, 60, 1);
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

span.chat--icon img {
    width: 20px;
}

@media (max-width: 1500px) {
    span.chat--icon img {
        width: 17px;
    }
}

span.chat--icon[disabled] {
    background: gray;
}

.rows--line {
    align-items: center;
}

.row--data:nth-child(4) {
    color: black;
    font-family: 'TT-600';
}

.rows--line .row--data:nth-child(5) {
    color: rgb(118, 118, 118);
}

span.close--int {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}

span.close--int:hover {
    transform: scale(1.15) rotate(90deg);
}

span.close--int[disabled] {
    filter: grayscale(100%);
}

span.close--int img {
    width: 100%;
    transition: transform 0.3s ease;
}

span.close--int:hover img {
    transform: scale(1.1);
}

.moderate--buttons button {
    width: 128px;
    height: 30px;
    background: rgba(74, 170, 60, 1);
    color: white;
    font-size: 0.875rem;
    border: 0;
    font-family: 'TT-400';
    border-radius: 5px;
}

.moderate--buttons button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px #cccccc;
	}

.moderate--buttons button#btnStop {
    background: rgb(156, 156, 156);
    margin-top: 6px;
}

.moderate--buttons button#btnStop:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px #808080;
	}

.moderate--buttons button#btnPay {
    background: rgba(0, 108, 212, 1);
    border-radius: 5px;
    width: 150px;
    font-family: 'TT-600';
    margin-right: 15px;
}

.moderate--buttons button#btnPay:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px #808080;
	}

.rows--line {
    height: 80px;
    display: flex;
    align-items: center;
    border-bottom: 2px solid rgba(158, 158, 158, 1);
}

.rows--line:last-child {
    border-bottom: 0;
}

.moderate--buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.project--nav--btn.active:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 4px;
    background: #f7f7f7;
    top: 100%;
    left: 0;
}

.project--nav--btn:active {
    transform: scale(1);
}

@media (max-width: 1500px) {
    .rows--line {
        flex-wrap: wrap;
        height: auto;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .rows--header {
        display: none;
    }
}

.row--data .mobile {
    display: none;
}

@media (max-width: 1500px) {
    .row--data .mobile {
        display: block;
    }

    .row--data:nth-child(1) {
        width: 100%;
        display: flex;
    }

    .rows--line {
        gap: 5px;
    }

    .row--data:nth-child(2) {
        width: calc(100% - 55px);
        margin-right: 0;
    }

    .row--data:nth-child(3) {
        margin: 0;
    }

    .row--data:nth-child(3) span {
        width: 30px;
        height: 30px;
    }

    .row--data:nth-child(4) {
        width: 60%;
    }

    .row--data:nth-child(5) {
        display: none;
    }

    .row--data:nth-child(6) {
        width: 30%;
        display: flex;
        justify-content: right;
    }

    .moderate--buttons {
        justify-content: right;
    }

    .rows--line {
        justify-content: space-between;
        align-items: end;
    }

    .row--data:nth-child(3) {
        width: 30px;
        min-width: 30px;
    }

    span.close--int {
        min-width: 30px;
        width: 30px;
        height: 30px;
    }

    .row--data:nth-child(4) .mobile {
        color: #878787;
        font-family: 'TT-400';
    }

    .row--data:nth-child(4) .mobile b {
        color: black;
        font-family: 'TT-600';
    }

    .row--data:nth-child(6) {
        width: 200px;
    }

    .row--bloger b {
        font-size: 1.25rem;
        white-space: nowrap;
        max-width: 100%;
        text-overflow: ellipsis;
        display: inline-block;
        overflow-x: hidden;
    }

    .rows--line .row--data:nth-child(1) {
        font-family: 'TT-400';
        gap: 5px;
    }
}

@media (max-width: 1160px) {
    .row--data:nth-child(4) {
        width: 30%;
    }
}

@media (max-width: 750px) {
    .row--data:nth-child(6) {
        width: 128px;
    }

    .row--data.pay:nth-child(6) {
        width: 195px;
    }

    .row--data.one:nth-child(6) {
        width: 30px;
    }

    .mobile {
        white-space: nowrap;
    }

    .row--data:nth-child(4) {
        margin-top: 20px;
    }

    .project--content {
        padding-top: 0;
    }

    button.project--nav--btn {
        font-size: 1rem;
    }

    button.project--nav--btn span {
        font-size: 1rem;
    }

    button.project--nav--btn span {
        min-width: 30px;
        height: 30px;
        top: -8px;
    }

    button.project--nav--btn {
        padding: 8px 18px;
    }
}

@media (max-width: 500px) {
    button.project--nav--btn {
        padding: 8px 10px;
    }

    nav.project--nav {
        gap: 15px;
    }

    .project--content {
        padding: 10px;
        padding-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    button.project--nav--btn {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    nav.project--nav {
        gap: 8px;
    }

    button.project--nav--btn {
        font-size: 0.875rem;
    }

    button.project--nav--btn span {
        min-width: 30px;
        height: 30px;
        font-size: 1.125rem;
        font-weight: 600;
    }

    button.project--nav--btn {
        padding: 4px 8px;
    }
}


@media (max-width: 400px) {
    button.project--nav--btn {
        padding: 8px 5px;
        font-size: 0.75rem;
    }
}

.row--data#intStatus , 
.row--data#intUpdate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

button.row--filter,
button.row--sort {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    min-width: 30px;
    background: transparent;
}

button.row--filter:hover,
button.row--filter:active,
button.row--sort:hover,
button.row--sort:active {
    background: transparent;
}

.rows--controls {
    display: none;
}

@media (max-width: 1500px) {
    .rows--controls {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 10px;
    }

    #sortMob {
        border: 2px solid black;
        padding: 2px;
    }
}

/* PAGE 2 */

.bloger--header {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 10px;
}

.bloger--header a {
    color: rgba(81, 91, 176, 1);
    text-decoration: underline;
    font-family: 'TT-500';
}

.bloger--header p {
    color: rgba(154, 154, 154, 1);
}

.bloger--params {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.bloger--rating {
    width: auto;
    height: 32px;
    border-radius: 5px;
    background: rgba(240, 240, 240, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 5px;
    padding-right: 5px;
}

.bloger--rating img {
    width: 20px;
    margin-right: 8px;
}

.bloger--rating p {
    font-family: 'TT-600';
    font-size: 1rem;
}

a.bloger--reviews:nth-child(2) {
    margin-left: 18px;
    margin-right: 4px;
    font-family: 'TT-600';
}

a.bloger--reviews:nth-child(3) {
    font-family: 'TT-600';
    margin-right: 18px;
}

.bloger--icon {
    margin-right: 9px;
}

.bloger--icon img {
    height: 25px;
}

.bloger--icon {
    width: 25px;
}

.bloger--mass {
    margin-left: 9px;
}

.row--2 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 2px solid rgba(158, 158, 158, 1);
}

.row--2:last-child {
    border-bottom: 0;
}

.bloger--controls button {
    border-radius: 5px;
    background: rgba(74, 170, 60, 1);
    border: 0;
    color: white;
    width: 150px;
    height: 30px;
    font-size: 1rem;
    font-family: 'TT-400';
}

.bloger--controls button:nth-child(2) {
    background: rgba(235, 102, 95, 1);
}

.bloger--controls button:nth-child(2):hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px #808080;
	}

.bloger--controls {
    display: flex;
    flex-wrap: wrap;
    width: 150px;
    gap: 6px;
}

@media (max-width: 1150px) {
    .bloger--info {
        width: 100%;
    }

    .bloger--controls {
        width: 100%;
        justify-content: center;
        gap: 20px;
    }

    .bloger--controls button{
        border-radius: 8px;
    }
}

@media (max-width: 650px) {
    .bloger--header a {
        font-size: 0.875rem;
    }

    .bloger--header p {
        font-size: 0.875rem;
    }

    a.bloger--reviews:nth-child(2) {
        margin-left: 15px;
    }

    .bloger--header {
        gap: 5px;
        justify-content: space-between;
    }

    .bloger--header p {
        width: 70px;
        text-align: right;
    }

    .bloger--icon img {
        height: 20px;
    }

    .bloger--icon {
        width: 20px;
    }

    .bloger--icon {
        margin-right: 5px;
    }

    .bloger--mass {
        font-size: 0.875rem;
    }

    .row--2 {
        gap: 10px;
    }
}

@media (max-width: 420px) {
    .bloger--header p {
        width: 100%;
        text-align-last: left;
    }

    .bloger--mass {
        width: 100%;
        margin-left: 0;
        margin-top: 5px;
    }
}

p.success__end {
    font-family: 'TT-500';
    color: rgba(74, 170, 60, 1);
    white-space: nowrap;
}

.row--data.ended {
    width: auto !important;
}

.row--data.otm {
    width: 150px !important;
}

[data-page="3"] .moderate--buttons button {
    width: 150px;
}

.popup.arc {
    width: 800px;
    padding-left: 20px;
    padding-right: 20px;
}

.popup.arc .popup--title {
    font-family: 'TT-500';
}

.popup--subtitle {
    color: #a2a2a2;
    font-size: 1.5rem;
    font-family: 'TT-300';
}

.popup.arc .closer {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 35px;
    height: 35px;
    border-radius: 5px;
    border: 2px solid black;
    background: transparent;
}

.popup.arc .closer:active {
    color: black;
}

ol.popup--ol {
    list-style: none;
    padding: 0;
    margin: 15px;
    padding-right: 15px;
}

.popup--chat {
    border: 1px solid rgb(157, 157, 157);
    border-radius: 10px;
    margin-top: 20px;
}

.popup--ol li p {
    text-align: left;
}

@media (max-width: 650px) {
    ol.message-list {
        max-height: 300px;
    }

    h2.popup--title {
        font-size: 1rem;
    }

    .popup--subtitle {
        font-size: 0.875rem;
    }
}

@media (max-width: 400px) {
    h2.popup--title {
        font-size: 0.875rem;
    }

    .popup--subtitle {
        font-size: 0.75rem;
    }
}

@media (max-width: 360px) {
    h2.popup--title {
        text-align: left;
    }

    .popup--subtitle {
        text-align: left;
    }
}

.popup.review {
    padding: 18px 30px;
    width: 590px;
}

h2.popup--legend {
    font-size: 1.5rem;
    font-family: 'TT-500';
    text-align: center;
}

.reviews--stars {
    display: flex;
    align-items: center;
    gap: 5px;
}

.reviews--stars img {
    width: 20px;
    height: 20px;
}

.popup textarea {
    border: 1px solid rgba(158, 158, 158, 1);
    border-radius: 10px;
    margin-top: 14px;
    color: black;
    font-size: 1rem;
    padding: 9px 13px;
    width: 100%;
    height: 137px;
    font-family: 'TT-400';
    outline: none;
    resize: vertical;
    max-height: 200px;
    min-height: 60px;
}

.review--line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    margin-bottom: 11px;
}

.review--buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.review--buttons .btn--1,
.review--buttons .btn--2  {
    border-radius: 5px;
    background: rgba(79, 168, 62, 1);
    width: 100%;
    max-width: 260px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    font-family: 'TT-400';
    border: 0;
}

.review--buttons .btn--2 {
    background: rgba(221, 237, 224, 1);
    color: rgba(79, 168, 62, 1);
}

.review--buttons .btn--2:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px #808080;
	}

.review--buttons .btn--1.red {
    background: rgb(227, 11, 0);
    color: white;
}

.review--buttons .btn--1.red:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px #808080;
	}

@media (max-width: 530px) {
    h2.popup--legend {
        font-size: 1rem;
    }

    .popup textarea {
        margin-top: 10px;
        font-size: 0.875rem;
    }

    .review--buttons .btn--1, .review--buttons .btn--2 {
        font-size: 0.875rem;
    }

    .popup.review {
        padding: 15px 12px;
    }
}

.project--body:has(.project--content[data-expand="0"] ) {
    overflow: hidden;
}

.project--body {
    transition: height 0.3s ease;
    overflow: hidden;
}

button.project--expand[data-open="1"] img {
    transform: rotate(180deg);
}

.filter-wrapper {
    position: relative;
    display: inline-block;
}
.filter-wrapper .filter--list {
    display: none;
}
.filter-wrapper.open .filter--list {
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 0;
    border: 1px solid black;
    border-radius: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    list-style: none;
    font-size: 0.875rem;
    background: white;
    width: 300px;
    margin: 0;
    z-index: 1000;
}

.filter-wrapper.open .filter--list li,
.filter--portal-open li {
    padding: 4px 5px;
    text-align: left;
    font-family: 'TT-300';
}

.filter-wrapper.open .filter--list li.active,
.filter-wrapper.open .filter--list li:hover,
.filter--portal-open li.active,
.filter--portal-open li:hover {
    background: limegreen;
    color: white;
}

.filter-wrapper.open .filter--list li:first-child.active,
.filter-wrapper.open .filter--list li:first-child:hover,
.filter--portal-open li:first-child.active,
.filter--portal-open li:first-child:hover {
    background: red;
}

@media (max-width: 1500px) {
    .filter-wrapper.open .filter--list {
        transform: translateX(-75px);
    }
}

@media (max-width: 500px) {
    .filter-wrapper.open .filter--list {
        transform: translateX(-65px);
        width: 250px;
    }
}

.filter-wrapper .f-off{
    display: block;
}

.filter-wrapper .f-off:hover {
    transform: translateY(-0.5px);
    box-shadow: 0 1px 2px #808080;
	}

.filter-wrapper .f-on{
    display: none;
}

.filter-wrapper .f-act{
    display: none;
}

.filter-wrapper.active .f-off{
    display: none;
}

.filter-wrapper.active .f-on{
    display: block;
}

.filter-wrapper.active .f-act{
    display: none;
}

.filter-wrapper.open .f-off{
    display: none;
}

.filter-wrapper.open .f-on{
    display: none;
}

.filter-wrapper.open .f-act{
    display: block;
}

.project--page[data-page="1"] {
    display: flex;
    flex-direction: column;
}

button.row--sort .f-off{
    display: block;
}

button.row--sort .f-off:hover {
    transform: translateY(-0.5px);
    box-shadow: 0 1px 2px #808080;
	}
	
button.row--sort .f-on{
    display: none;
}

button.row--sort.active .f-off{
    display: none;
}

button.row--sort.active .f-on{
    display: block;
}

.rows--cont {
    display: flex;
    flex-direction: column;
}

.rows--cont.reverse {
    flex-direction: column-reverse;
}

.rows--cont.reverse .rows--line:first-child {
    border-bottom: 0;
}

.rows--cont.reverse .rows--line:last-child {
    border-bottom: 2px solid rgba(158, 158, 158, 1);
}

.rows--cont.reverse .rows[data-show=1]:first-child {
    border-bottom: 0;
}

.rows--line.bn {
    border-bottom: 0;
}

.popup.hint {
    top: 50vh;
    position: fixed !important;
} 

@media (max-width: 450px) {
    ol.message-list li.date-exploder {
        font-size: 0.875rem;
        margin: 0;
    }

    .notice-text {
        font-size: 16px;
    }

    .notice-system-content p {
        font-size: 12px;
    }
}

.project--block {
    margin-bottom: 30px;
}


@media (max-width: 750px) {
    p.empty {
        margin-top: 10px;
    }
}

@media (max-width: 650px) {
    aside.hint {
        display: none !important;
    }
}

span.chat--icon.unread { 
    animation: pulse 1s linear infinite;
}

@keyframes pulse {
    0% {
        background: limegreen;
    }
    50% {
        background: red;
        transform: scale(1.1);
    }
    100% {
        background: limegreen;
    }
}

span.animPulse { 
    animation: pulseSpan 1s linear infinite;
}

@keyframes pulseSpan {
    0% {
        transform: scale(1.0) translateY(-50%);
    }
    50% {
        transform: scale(1.1) translateY(-50%);
    }
    100% {
        transform: scale(1.0) translateY(-50%);
    }
}

@media (max-width: 650px) {
    @keyframes pulseSpan {
    0% {
        transform: scale(1.0) translateY(-50%);
    }
    50% {
        transform: scale(1.2) translateY(-50%);
    }
    100% {
        transform: scale(1.0) translateY(-50%);
    }
}
}


@media (max-width: 570px) {
    .project--block {
        padding: 0;
    }

    header.project--header {
        padding: 15px;
        padding-bottom: 0;
    }

    /* .layout {
        padding-left: 0;
        padding-right: 0;
    } */
}

@media (max-width: 410px) {
    .moderate--buttons {
        flex-wrap: wrap-reverse !important;
    }

    .moderate--buttons button#btnPay {
        margin-right: 0;
        margin-top: 5px;
    }
    
}

@media (max-width: 390px) {
    ul.project--params li {
        font-size: 0.875rem;
    }

    .row--data.one:nth-child(6):has(#btnPay) {
        width: 200px;
        justify-content: left;
    }

    .moderate--buttons button#btnPay {
        margin-top: 0;
        margin-right: 15px;
    }
}

button.waitResponse:disabled {
    font-size: 0;
    background-image: linear-gradient(rgb(0 0 0/20%) 0 0) !important;
}

button.waitResponse img {
    height: 20px;
    width: auto;
    display: none;
    animation: around 3s infinite linear;
}

button.waitResponse:disabled img {
    display: block;
}

@keyframes around {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}


.rows--line.focused {
    animation: focusLine 1 linear 1s;
}

@keyframes focusLine {
    0% {
        background: transparent;
    }
    50% {
        background: lightgray;
    }
    100% {
        background: transparent;
    }
}