.user{
    padding: 60px 0;
}
.tab-content{
    display: none;
}
.user__container{
    display: flex;
    gap: 40px;
}

<iframe width="720" height="405" src="https://rutube.ru/play/embed/45ea77c34fbe74b73bd25b79a74660e1" style="border: none;" allow="clipboard-write;" allowFullScreen></iframe>
    
.user__title{
    color: black;
    font-size: 60px;
    margin-bottom: 50px;
}
.user__info{
    min-width: 100px;
    transition: 0.3s all ease-in-out;
}

.user__info-active .user__info-name{
    display: block;
}
.user__info-active{
    min-width: 360px;
}
.user__info-active .user__info-form{
    display: flex;
}

.user__tabs{
    padding: 10px;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0px 0px 8px 2px rgba(106, 129, 140, 0.1);
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.user__tab{
    padding: 20px 30px;
    border-radius: 10px;
    font-size: 18px;
    display: flex;
    line-height: 100%;
    gap: 10px;
    align-items: center;
    background-color: rgba(250, 250, 250, 1);
    color: black;
    cursor: pointer;
    transition: 0.3s all ease-in-out;
}
.user__tab-ico path{
    transition: 0.3s all ease-in-out;
    fill: black;
}
.user__tab-active{
    background-color: rgba(0, 160, 203, 1);
    color: white;
}
.user__tab-active .user__tab-ico path{
    fill: white;
    stroke: white;
}
.tech-message{
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(0, 160, 203, 1);
    font-size: 32px;
    padding: 250px 0;
    width: 100%;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0px 0px 8px 2px rgba(106, 129, 140, 0.1);
}
.chat, .docs{
    width: 100%;
}

.user__info, .user__cart{
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 8px 2px rgba(106, 129, 140, 0.1);
}
.user__cart{
    width: 100%;
}
.user__cart-title{
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 30px;
}
.user__info-top{
    display: flex;
    gap: 15px;
    position: relative;
    margin-bottom: 30px;
}

.user__info-shut{
    position: absolute;
    top: 0;
    cursor: pointer;
    right: 50%;
    transform: translateX(50%) rotate(180deg);
    transition: 0.3s all ease-in-out;
}
.user__info-active .user__info-shut{
    right: 0;
     transform: translateX(0) rotate(0);
}
.user__info-icon{
    transition: 0.3s all ease-in-out;
    margin-top: 30px;
    width: 60px;
    height: 60px !important;
    object-fit: cover;
}
.user__info-active .user__info-icon{
    margin-top: 0;
}
.user__info-name{
    font-size: 20px;
    font-weight: 700;
    display: none;
    transition: 0.3s all ease-in-out;
}
.user__info-form{
    display: none;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 24px;
}
.user__info-input-name{
    font-size: 14px;
    color: rgba(140, 140, 140, 1);
    margin-bottom: 5px;
}
.user__info-form .login-popup__input{
    width: 100%;
}
.user__cart .product__img {
    width: 100px;
}
.user__cart .product__name {
    font-size: 16px;
}
.user__cart .product__total {
    font-size: 24px;
}
.user__cart .cart__sum {
    font-size: 32px;
}
.cart__total {
    max-width: 200px;
}
.login-popup__error{
    display: none;
}
.user__info .header__logout{
    width: fit-content;
}
.sub{
    width: 100%;
    padding: 20px;
    background-color: white;
    box-shadow: 0px 0px 8px 2px rgba(106, 129, 140, 0.1);
    border-radius: 10px;
}
.sub__title{
    font-size: 25px;
    font-weight: 700;
    line-height: 100%;
    margin-bottom: 30px;
}
.sub__list{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.sub__item{
    display: flex;
    gap: 30px;
}
.sub__img-container{
    padding: 15px;
    box-shadow: 0px 0px 8px 2px rgba(106, 129, 140, 0.1);
    border-radius: 10px;
    background-color: white;
}
.sub__img{
    width: 200px;
    border-radius: 10px;
    overflow: hidden;
    object-fit: cover;
}
.sub__content{
    display: flex;
    gap: 30px;
    flex-direction: column;
}
.sub__name{
    font-size: 18px;
    font-weight: 700;
    max-width: 220px;
}
.sub__content-bottom{
    display: flex;
    gap: 33px;
}
.sub__date{
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    color: black;
}
.sub__date-value, .sub__exp{
    font-size: 16px;
    font-weight: 400;
    color: rgba(119, 119, 119, 1);
}
.sub__status-active{
    padding: 10px 20px;
    font-size: 14px;
    color: rgba(0, 149, 32, 1);
    border-radius: 100px;
    border: 1px solid rgba(0, 149, 32, 1);
}
.sub__activate{
    padding: 10px;
    color: white;
    background-color: rgba(0, 160, 203, 1);
    border-radius: 10px;
    font-size: 14px;
    border: none;
    transition: all .5s ease 0s;
}
.sub__activate:hover{
    background-color: #47BBDA;
    border-color: #47BBDA;
    color: #fff;
}
@media(max-width: 600px){
    .sub__item{
        align-items: center;
        justify-content: center;
    }
    .sub__img-container{
        height: fit-content;
        padding: 0;
    }
    .sub__status-active{
        padding: 10px;
        height: fit-content;
        width: fit-content;
    }
    .sub__content-bottom{
        flex-direction: column;
    }
    .sub__name {
        font-size: 16px;
    }
    .sub__date, .sub__date-value, .sub__exp {
        font-size: 14px;
    }
    .sub__img {
        width: 175px;
    }
}
@media(max-width:475px){
    .user__container{
        flex-direction: column;
    }
    .user__cart .product__img {
        width: 70px;
    }
    .user__info {
        min-width: 100px;
    }
}