:root {
    --border-color: #dee2e6;
    --label-bg-color: #dee2e6;
    --comments-section-background: #95bde5;
}

.wishlist-container {
    margin: 5px;
    padding: 10px;
    border: 1px solid var(--label-bg-color);
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.wishlist-container .wish-comments-container {
    border: 1px solid var(--label-bg-color);
    padding: 5px;
    border-radius: 3px;
}

.wishlist-container .wish-comments-container .comment-form {
    border-top: 1px solid var(--label-bg-color);
    margin: 5px -5px 0 -5px;
    padding: 5px 10px 0 10px;
}

.wishlist-container .wish-comments-container .wish-comments {
    font-size: .9em;
    font-weight: normal;
    margin: 3px 5px;
}

.wishlist-container .wish-comments-container .comment {
    margin: 5px;
    padding: 5px 10px;
    border-radius: 3px;
    border: 1px solid var(--label-bg-color);
    background-color: white;
}


.wishlist-container .wish-comments-container .comment .comment-author {
    font-size: .9em;
    font-style: italic;
}

.wishlist-container table tbody tr:first-of-type td {
    border-top-style: none;
}

.wish-list h3 {
    margin-left: 5px;
}

.wishlist-name {
    background-color: var(--label-bg-color);
    margin: -10px;
    padding: 5px 10px;
}

.profile-content {
    display: grid;
    grid-template: "group-list wish-list" auto / 1fr 4fr;
}

.profile-content .group-list {
    grid-area: group-list;
    padding: 5px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    align-self: flex-start;
}

@media only screen and (max-width: 990px) {
    .profile-content {
        display: grid;
        grid-template:
        "group-list" auto 
        "wish-list" auto / 1fr;
    }

    .profile-content .group-list {
        grid-area: group-list;
        padding: 5px;
        position: relative;
    }
}

.profile-content .wish-list {
    grid-area: wish-list;
    padding: 5px;
}

input:invalid {
    border: 2px dashed red;
}

label {
    width: 100%;
}