.equipments {
    margin: 30px 0;
    padding: 15px;
    background-color: #3F3C4D;
    border-radius: 10px;
    clear: both;
}

.equipment-item {
    display: flex;
    flex-direction: column;
    position: relative;
}

.equipment-item:not(:last-child) {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #64616F;
}

.equipment-item__position {
    position: absolute;
    top: -5px;
    left: -5px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 16px;
    padding: 0 2px;
    font-size: 12px;
    line-height: 1;
    background-color: #FFC700;
    border-radius: 2px;
}

.equipment-item__main {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.equipment-item__image {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 15px;
    background-color: #c4c4c4;
    border: 1px solid #ECF1F7;
    border-radius: 4px;
}

.equipment-item__name {
    display: inline;
    font-size: 16px;
    line-height: 18px;
    font-weight: bold;
    vertical-align: middle;
    text-decoration: none;
    color: #ffffff;
}

a.equipment-item__name:hover {
    text-decoration: underline;
}

.equipment-item__sign {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='%2300B67F' d='M10.75 2.45c.69-.59 1.82-.59 2.52 0l1.58 1.36c.3.26.86.47 1.26.47h1.7c1.06 0 1.93.87 1.93 1.93v1.7c0 .39.21.96.47 1.26l1.36 1.58c.59.69.59 1.82 0 2.52l-1.36 1.58c-.26.3-.47.86-.47 1.26v1.7c0 1.06-.87 1.93-1.93 1.93h-1.7c-.39 0-.96.21-1.26.47l-1.58 1.36c-.69.59-1.82.59-2.52 0l-1.58-1.36c-.3-.26-.86-.47-1.26-.47H6.18c-1.06 0-1.93-.87-1.93-1.93V16.1c0-.39-.21-.95-.46-1.25l-1.35-1.59c-.58-.69-.58-1.81 0-2.5l1.35-1.59c.25-.3.46-.86.46-1.25V6.2c0-1.06.87-1.93 1.93-1.93h1.73c.39 0 .96-.21 1.26-.47l1.58-1.35Z'/%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m8.38 12 2.41 2.42 4.83-4.84'/%3E%3C/svg%3E");
    background-size: contain;
}

.equipment-item__type {
    margin-top: 5px;
    font-size: 14px;
    line-height: 16px;
    font-weight: 500;
    color: #00B67F;
}

.equipment-item__props {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    gap: 12px;
}

.equipment-item__prop {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.equipment-item__prop:after {
    content: "";
    display: block;
    flex-grow: 1;
    min-width: 10px;
    height: 1px;
    margin: 0 5px 4px;
    background-image: linear-gradient(to right, #808080 33%, rgba(255, 255, 255, 0) 0%);
    background-position: bottom;
    background-size: 3px 1px;
    background-repeat: repeat-x;
}

.equipment-item__prop-label {
    order: -1;
    font-size: 14px;
    line-height: 18px;
    color: #B1B1B1;
}

.equipment-item__prop-value {
    order: 1;
    font-size: 16px;
    line-height: 19px;
    font-weight: 500;
    color: #ffffff;
}

.equipment-item__coin {
    display: flex;
    align-items: center;
    z-index: 1;
}

.equipment-item__coin-logo {
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

.equipment-item__coin-name {
    font-size: 16px;
    line-height: 19px;
    font-weight: 500;
    color: #ffffff;
    text-decoration: none;
}

a.equipment-item__coin-name:hover {
    text-decoration: underline;
}

.equipment-item__coin-more {
    margin-left: 5px;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-style: dashed;
    text-underline-position: under;
    color: #51ABFF;
    background-color: transparent;
    border: 0;
}

.equipment-item__coin-more:hover {
    text-decoration: none;
}

.equipment-item__coin-tooltip .tooltip__content {
    min-width: 150px;
}

.equipment-item__coin-tooltip .tooltip__content:before {
    right: 20px;
}

.equipment-item__coin-tooltip img {
    margin: 0 10px 0 0;
}

.equipment-item__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.equipment-item__price {
    font-size: 24px;
    line-height: 1;
    color: #FF7A00;
    font-weight: bold;
    white-space: nowrap;
}

.equipment-item__button {
    position: relative;
    width: 94px;
    padding: 0;
    font-size: 16px;
    z-index: 1;
}

.equipment-item__button.loading:after {
    width: 2em;
    height: 2em;
    border-top: 0.2em solid rgb(0 159 255);
    border-right: 0.2em solid rgb(0 159 255);
    border-bottom: 0.2em solid rgba(255, 255, 255, 0.2);
    border-left: 0.2em solid #ffffff;
    margin-left: -10px;
    margin-top: -10px;
}

.equipment-item__offers {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #F6F5F6;
}

.equipment-item__offers-price {
    font-size: 16px;
    line-height: 18px;
    color: #ffffff;
    font-weight: bold;
}

.equipment-item__offers-link {
    display: flex;
    align-items: center;
    margin-top: 5px;
    font-size: 12px;
    line-height: 16px;
    text-decoration: none;
    color: #51ABFF;
    z-index: 1;
}

.equipment-item__offers-link:hover {
    text-decoration: underline;
}

.equipment-item__offers-link.loading:after {
    position: initial;
    margin: 0 0 0 5px;
    width: 15px;
    height: 15px;
    border-top: 0.2em solid rgb(0 159 255);
    border-right: 0.2em solid rgb(0 159 255);
    border-bottom: 0.2em solid rgba(255, 255, 255, 0.2);
    border-left: 0.2em solid #ffffff;
}

.equipment-item--open-offers .equipment-item__offers-link:before {
    content: "";
    order: 1;
    display: block;
    width: 8px;
    height: 8px;
    margin: 2px 0 0 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='8' fill='none'%3E%3Cpath fill='%2351ABFF' d='M4.5 0 1.036 6h6.928L4.5 0Z'/%3E%3C/svg%3E");
}

.equipment-offers {
    width: 100%;
    margin-top: 10px;
    padding: 15px;
    background-color: #494656;
    border-radius: 10px;
}

.equipment-offer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.equipment-offer:not(:last-child) {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #63616F;
}

.equipment-offer__name {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    line-height: 14px;
    font-weight: 500;
    text-decoration: none;
    color: #D9DADC;
}

a.equipment-offer__name {
    text-decoration: underline;
}

.equipment-offer__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.equipment-offer__rating {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    line-height: 16px;
    font-weight: bold;
    color: #FFC700;
}

.equipment-offer__rating:before {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFC700' d='M11.94 4.83 9.113 7.586l.667 3.89a.195.195 0 0 1-.079.194.195.195 0 0 1-.208.015L6.08 9.89l-3.58 1.81a.196.196 0 0 1-.206-.016.193.193 0 0 1-.077-.193l.67-3.906L.06 4.83a.198.198 0 0 1 .109-.338l3.905-.568L5.822.384c.034-.07.1-.11.176-.11.077 0 .143.04.176.11l1.748 3.54 3.906.568a.194.194 0 0 1 .159.135.189.189 0 0 1-.047.203Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h12v12H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") no-repeat;
}

.equipment-offer__comment {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    line-height: 16px;
    color: #ffffff;
}

.equipment-offer__comment:before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='13' fill='none'%3E%3Cpath fill='%23B1B1B1' d='M1.089.75C.494.75 0 1.244 0 1.839v8.322c0 .595.494 1.089 1.089 1.089h3.728l1.896 1.652a.467.467 0 0 0 .574 0l1.896-1.652h3.728c.595 0 1.089-.494 1.089-1.089V1.84C14 1.244 13.506.75 12.911.75H1.09Zm0 .875H12.91c.094 0 .214.12.214.214v8.322c0 .094-.12.214-.214.214H9.188c-.104 0-.37-.024-.453.039L7 11.944l-1.735-1.53c-.083-.063-.349-.04-.452-.039H1.088c-.094 0-.214-.12-.214-.214V1.84c0-.094.12-.214.214-.214ZM2.75 3.317a.467.467 0 1 0 .049.933h8.4a.467.467 0 1 0 0-.933H2.751Zm0 2.1a.467.467 0 1 0 .049.933h8.4a.467.467 0 1 0 0-.933H2.751Zm0 2.275a.467.467 0 1 0 .049.933h8.4a.467.467 0 1 0 0-.933H2.751Z'/%3E%3C/svg%3E") no-repeat;
}

.equipment-offer__image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: #ffffff;
    border: 1px solid #F6F5F6;
    border-radius: 5px;
    overflow: hidden;
}

.equipment-offer__price {
    margin-bottom: 4px;
    font-size: 16px;
    line-height: 32px;
    font-weight: bold;
    text-align: right;
    color: #ffffff;
}

.equipment-offer__button {
    flex-shrink: 0;
    width: 120px;
    height: 32px;
    padding: 0;
    font-size: 16px;
}

/*** Responsive ***/

@media (min-width: 768px) {

    .equipment-item {
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .equipment-item__main {
        order: 1;
        width: 50%;
        margin-bottom: 0;
    }

    .equipment-item__info {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .equipment-item__name {
        order: 1;
        font-size: 18px;
        line-height: 21px;
    }

    .equipment-item__type {
        order: 2;
        margin: 0;
        font-size: 18px;
        line-height: 21px;
    }

    .equipment-item__sign {
        order: 3;
        margin: 0;
    }

    .equipment-item__footer {
        order: 2;
        justify-content: flex-end;
        gap: 20px;
        width: 50%;
    }

    .equipment-item__button {
        width: 126px;
        height: 32px;
    }

    .equipment-item__props {
        order: 3;
        flex-direction: row;
        width: calc(100% - 150px);
        margin: 10px 0 0;
    }

    .equipment-item__prop {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        width: 25%;
    }

    .equipment-item__prop:after {
        display: none;
    }

    .equipment-item__prop-label {
        order: 2;
        font-size: 12px;
        line-height: 16px;
    }

    .equipment-item__prop-value {
        order: 1;
    }

    .equipment-item__coin-tooltip .tooltip__content {
        right: initial;
        left: 0;
        margin-left: -55px;
    }

    .equipment-item__coin-tooltip .tooltip__content:before {
        right: initial;
        left: 50%;
        margin-left: -6px;
    }

    .equipment-item__offers {
        order: 4;
        align-items: flex-end;
        justify-content: flex-end;
        width: 150px;
        margin: 10px 0 0;
        padding-top: 0;
        border-top: none;
    }

    .equipment-offers {
        order: 5;
    }

    .equipment-offer:not(:last-child) {
        margin-bottom: 15px;
        padding-bottom: 0;
        border-bottom: 0;
    }

    .equipment-offer__main {
        display: flex;
        align-items: center;
        width: 100%;
    }

    .equipment-offer__image {
        order: -1;
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        margin-right: 20px;
    }

    .equipment-offer__info {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: space-between;
    }

    .equipment-offer__name {
        margin-bottom: 0;
    }

    .equipment-offer__meta {
        margin-bottom: 0;
        gap: 20px;
    }

    .equipment-offer__aside {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-shrink: 0;
        gap: 10px;
        width: 50%;
    }

    .equipment-offer__price {
        line-height: 19px;
        margin-bottom: 0;
    }

    .equipment-offer__button {
        width: 150px;
    }
}