.profile__img > img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.profile__img--new > img {
    width: 80px;
    height: 80px;
    border-radius: 8px;
}

.profile__info--div {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 32px;
}

.profile__name--info {
    display: flex;
    flex-direction: column;
    row-gap: 5px;
    justify-content: center;
}

.profile__fans,
.profile__subscriptions,
.profile__posts,
.profile__shop {
    display: flex;
    flex-direction: column;
    row-gap: 5px;
}

.profile__count {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 16px;
}

.profile__fan--count,
.profile__subscription--count,
.profile__name,
.profile__shop--count,
.profile__post--count {
    font-weight: bold;
}

.profile__category {
    color: #adabab;
}

.profile__username {
    color: rgb(77, 76, 76);
    font-weight: bold;
}

.professional__dashboard {
    display: flex;
    flex-direction: column;
    background-color: #eee;
    padding: 10px 15px;
    border-radius: 16px;
    cursor: pointer;
}

.professional__dashboard > div {
    font-weight: bold;
}

.edit__share--profile,
.profile__subscribe--message {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 1rem;
}

.profile__subscribe--message > * {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
}

.profile__subscribe {
    background-color: black;
    color: white;
}

.profile__message {
    background-color: #eee;
}

.cls__1 {
    background-color: #eee;
    color: black;
}

.edit__profile,
.profile__hub,
.view__activity,
.account__details,
.message__me {
    background-color: #eee;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
}

.profile__name--svg {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.profile__bio,
.professional__dashboard,
.edit__share--profile,
.profile__subscribe--message {
    margin: 10px 0px;
}

.shop__post--switch {
    margin: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 3rem;
}

.post__content--switch,
.shop__content--switch {
    cursor: pointer;
}

.grid__profile--pin,
.grid__shop--pin{
    column-count: 5;
    column-gap: 8px;
}


.grid__item--pin{
    display:inline-block;
    width:100%;
    margin-bottom: 5px;
    break-inside:avoid;
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    cursor:pointer;
}

.grid__item--img > img {
    width:100%;
    display:block;
    border-radius:16px;
}

.grid__item--title,
.grid__item--title-shop {
    font-size: 13px;
}

.grid__item--view {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 13px;
}

a {
    text-decoration: none;
    color: black;
}

.js-switch {
    border-bottom: 2px solid #28DF99;
}

.update__profile--svg {
    width: 25px;
    height: 25px;
    padding: 10px;
    border-radius: 50%;
    background-color: #eee;
    cursor: pointer;
}

.update__profile--header {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 10px;
    border-bottom: 2px solid #eee;
}

.update__profile--body {
    padding: 15px;
}

.share__profile {
    cursor: pointer;
}

.update__profile--name,
.update__profile--bio,
.update__profile--category,
.update__profile--gender {
    display: flex;
    flex-direction: column;
    margin: 15px 0px;
    row-gap: 5px;
}

.update__name--input,
.update__bio--input,
#update__category,
#update__gender {
    padding: 15px;
    border-radius: 16px;
    outline: none;
    border: none;
    border: 2px solid #eee;
}

.update__profile--submit {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.update__profile--submit > button {
    padding: 10px 15px;
    border-radius: 8px;
    background-color: red;
    color: white;
    font-weight: bold;
    border: none;
    cursor: pointer;
}

 .update__profile--image {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.update__prof {
    width: 50px;
    height: 50px;
    padding: 10px;
    border-radius: 50%;
    background-color: #eee;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.preview__profile--img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    position: absolute;
}

.update__profile--svg {
    margin-left: 10px;
}

.error__message {
    position: fixed;
    top: 45%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 20px;
    background-color: red;
    padding: 0px 10px;
    border-radius: 8px;
    box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);
    color: white;
    font-weight: bold;
}

.success__message {
    position: fixed;
    top: 35%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 20px;
    background-color: #28DF99;
    padding: 0px 10px;
    border-radius: 8px;
    box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);
    color: white;
    font-weight: bold;
}

.unsubscribe__profile--warning > p {
    padding: 0px 20px;
    text-align: center;
}

.unsubscribe__profile--int{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-gap: 2rem;
}

.unsubscribe__profile--backdrop {
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 150;
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}

.unsubscribe__profile--yes {
    background-color: red;
}

.unsubscribe__profile--no {
    background-color:#28DF99;
}

.unsubscribe__profile--int > * {
    font-weight: bold;
    color: white;
    padding: 10px 30px;
    cursor: pointer;
    border-radius: 10px;
}

.unsubscribe__profile--header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-bottom: 2px solid #eee;
}

.account__status--div {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 15px;
}

.account__status--name {
    color: rgb(97, 97, 97);
    font-weight: bold;
}

.account__status--time {
    background-color: #28DF99;
    padding: 5px 15px;
    border-radius: 16px;
    color: white;
}

.view__details {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 15px;
    column-gap: 15px;
}


.grid__price {
    display: flex;
    flex-direction: row;
    column-gap: 5px;
    margin-left: 5px;
}


.grid__price > * {
    font-weight: bold;
}

.share__profile--backdrop {
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 150;
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}

.share__profile--header {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 10px;
    border-bottom: 2px solid #eee;
}

.share__profile--header svg {
    margin-left: 20px;
    padding: 10px;
    background-color: #eee;
    border-radius: 50%;
    cursor: pointer;
    margin-top: 4px;
}

.share__profile--body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 50px;
}

.copied_link {
    flex: 1;
    padding: 10px;
    outline: none;
    border: 2px solid #eee;
    border-radius: 8px;
}



@media(max-width:1400px){
    .grid__profile--pin,
    .grid__shop--pin{
        column-count:4;
    }
}

@media(max-width:1100px){
    .grid__profile--pin,
    .grid__shop--pin{
        column-count:3;
    }
}

@media(max-width:768px){
    .grid__profile--pin,
    .grid__shop--pin{
        column-count:2;
    }
}



@media (max-width: 919px) {
    .profile__header {
        display: flex;
        flex-direction: row;
        align-items: center;
        column-gap: 10px;
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        height: 60px;
        border-bottom: 2px solid rgb(241, 236, 236);
        background-color: white;
        z-index: 100;
    }

    .profile__header--svg {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background-color: #eee;
        padding: 10px;
        margin-left: 10px;
    }

    .profile__header > p {
        font-weight: bold;
        font-size: 20px;
    }

    .update__profile--backdrop {
        display: none;
    }

    .update__profile--modal {
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        z-index: 200;
        background-color: white;
        overflow-y: auto;
    }

    .update__profile--header {
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        background-color: white;
        z-index: 100;
    }

    .update__profile--body {
        margin-top: 50px;
    }

    .error__message,
    .success__message {
        left: 5%;
        margin-right: 20px;
    }

    .unsubscribe__profile--modal{
        position: fixed;
        top: 50%;
        right: 0px;
        left: 0px;
        bottom: 0px;
        background-color: white;
        z-index: 200;
        border-radius: 32px 32px 0px 0px;
    }

    .unsubscribe__profile--header > p {
        font-size: 16px;
        font-weight: bold;
    }

    .share__profile--modal {
        position: fixed;
        top: 50%;
        right: 0px;
        left: 0px;
        bottom: 0px;
        background-color: white;
        z-index: 200;
        border-radius: 32px 32px 0px 0px;
    }

    .share__profile--header > p {
        font-size: 16px;
        font-weight: bold;
    }

}


@media (min-width: 920px) {
    .update__profile--modal {
        position: fixed;
        top: 30%;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 45%;
        height: 45vh;
        background-color: white;
        z-index: 200;
        border-radius: 10px;
        box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);
        overflow-y: auto;
    }

    .update__profile--header > p {
        font-size: 24px;
        font-weight: bold;
        margin: 0;
    }

    .update__profile--header {
        padding: 5px 0px;
        position: sticky;
        z-index: 100;
        top: 0px;
        left: 0px;
        right: 0px;
        background-color: white;
    }

    .update__profile--backdrop {
        background-color: rgba(0, 0, 0, 0.2);
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        z-index: 150;
    }

     .error__message,
     .success__message {
        left: 40%;
    }

     .unsubscribe__profile--modal{
        position: fixed;
        top: 30%;
        left: 50%;
        transform: translate(-50%);
        background-color: white;
        z-index: 200;
        width: 35%;
        height: 35vh;
        border-radius: 10px;
        box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);
    }

    .unsubscribe__profile--header > p {
        font-size: 24px;
        font-weight: bold;
        margin: 0;
    }

    .unsubscribe__profile--header {
        padding: 10px 0px;
    }

    .share__profile--modal {
        position: fixed;
        top: 30%;
        left: 50%;
        transform: translate(-50%);
        background-color: white;
        z-index: 200;
        width: 35%;
        height: 35vh;
        border-radius: 10px;
        box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);
    }

    .share__profile--header > p {
        font-size: 24px;
        font-weight: bold;
        margin: 0;
    }

    .share__profile--header {
        padding: 10px 0px;
    }
}