#top-nav {
    padding: 16px 32px;
    background-color: #F9F9F9;
}

#main-nav {
}

#main-nav {
    margin: 0px 32px 0px 32px;
    padding: 0 32px 0 0;
}

#content {
    max-width: 1280px;
}

#content SECTION {
    margin-bottom: 2rem;
}

.fab-add {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 3;
}

.flex-shrink {
    flex: 0 !important;
}

.flex-grow {
    flex: 1;
}

.card-container {
    display: flex;
}

.card-container .card {
    flex: 0 0 33%;
}


/**
 * Notable dates
 */

.notable_dates .birthday:before {
    content: "🎂 "
}

.notable_dates .deathday:before {
    content: "✝ "
}

.notable_dates .wedding:before {
    content: "⚭ "
}

.notable_dates .relationship:before {
    content: "♥ "
}

.notable_dates UL {
    list-style-type: none;
}

/**
 * Avatar
 */

IMG.avatar {
    width: 192px;
    height: 192px;
    border-radius: 50%;
}

IMG.avatar.small {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

/**
 * Commalist
 */

UL.commalist {
    display: inline;
    padding: 0;
    margin: 0;
}

UL.commalist LI {
    display: inline;
    padding: 0;
    margin: 0;
}

UL.commalist LI:after {
    content: ", "
}

UL.commalist LI:last-child:after {
    content: ""
}

.htmx-indicator {
    /* TODO
    */
}

/* MAP VIEW */
#map {
    width: 100%;
    height: 600px;
}

/* OVERVIEW */

.overview-list {
}

.overview-list LI UL {
    margin: 0 0 1rem 0;
}

/**
 * AVATAR PORTRAIT IMAGE CROPPER
 */

.cropper-face, .cropper-view-box {
    border-radius: 50%;
}

.cropper-view-box IMG {
    border-radius: 0%;
}

.cropper-face {
}

/* The css styles for `outline` do not follow `border-radius` on iOS/Safari (#979). */
.cropper-view-box {
    outline: 0;
    box-shadow: 0 0 0 1px #39f;
}

#profile_image_cropper {
    position: relative;
}

#image_preview {
    display: block;
    max-width: 100%;
}

#set_profile_image {
    position: absolute;
    right: 16px;
    top: 16px;
}