.image-card {
    /* border-radius: 2px; */    
    position: relative;
    width: 300px;
    min-width: 128px;
    /* margin: 2px; */
    /* box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1); */
    vertical-align: middle;
    display: inline-flex;
    flex-direction: column;
}


.image-card.private {
    border: 3px solid;
}

.image_opt {
    width: 26px;
    height: 26px;
    margin-right: 12px;
    margin-bottom: 0.0em;
    cursor: pointer;
    background-size: 100% 100%;
    /* filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, .3)); */
    filter: drop-shadow(0px 0px 1px rgba(255, 255, 255, 1.0)) drop-shadow(0px 0px 4px rgba(255, 255, 255, 0.75));
    opacity: 0.0;
}

.image-card:hover .image_opt {
    filter: none;
}
.image_opt.star_image {
    background-size: 100% 100%;
    background-image: url(/svg/heart.svg);
}
.image_opt.star_image.liked {
    background-image: url(/svg/heart_full.svg);
    opacity: .75;
}
.image_opt.tag-button.has-tags {
    opacity: .75;
}
.image_opt.download {
    background-size: 100% 100%;
    background-image: url(/svg/download.svg);
}
.image_opt.download.is-downloaded {
    cursor:default;
    background-image: url(/svg/download-check.svg);
    opacity: .75;
}
.image_opt.delete {
    background-image: url(/svg/trash.svg);
}
.image_opt.privacy {
    background-image: url(/svg/eye.svg);
}
.image_opt.privacy.private {
    background-image: url(/svg/eye-off.svg);    
}

.main_image {
    width: 100%;
    background-size: auto 100%;
    display: block;
    background-repeat: no-repeat;
    background-position: center top;
}

.main_image img {
    width: 256px;
    height: 256px;
    display: block;
}

/* Model specific image styling. */
.image-card.characters {
    box-shadow: none;
    background: #f8f7f7;
}
.image-card.characters .main_image {
    background-size: 100% auto;
    mix-blend-mode: multiply;
    filter: brightness(1.085);
}


@media only screen and (min-width: 600px) {
    /* Custom styling for when only one model is selected. */
    .image-card.landscapes{
        background: none;
    }
    .image-card.landscapes .main_image {
        background-size: auto 84%;
        background-position: center center;
    }
    .children_container.landscapes .image-card {
        /* width: 414px;
        height: 256px; */
        height: 300px;
        width: 485px;
    }
    .children_container.landscapes .image-card .main_image {
        height: 100%;
        background-size: 100% 100%;
    }

    .children_container.characters .image-card {
        /* height: 340px;
        width: 256px; */
        width:  300px;
        height: 400px;
    }
    .children_container.characters .image-card .main_image {
        height: 100%;
        background-size: 100% 100%;
    }
}

.info.flex_row {
    max-width: 100%;
    /* justify-content: center; */
    /* margin-bottom: 2px; */
}
.flex_row.image-opts {
    /* justify-content: center; */
    margin: 4px;
    /* margin-bottom: 4px; */
}

.card-bottom {
    width: 100%;
    flex-direction: column;
    position: absolute;
    bottom: 0px;
    -webkit-transition: background-color 100ms ease;
    -ms-transition: background-color 100ms ease;
    transition: background-color 100ms ease;
}
.card-bottom p {
    margin: 0px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.image-card a.creator_name {
    display: inline-flex;
    font-weight: 500;
    margin: 0px;
    margin-right: 4px;
    /* margin-left: 4px; */

    color: #d4d4d4;
    font-weight: 100;

    -webkit-transition: color 100ms ease;
    -ms-transition: color 100ms ease;
    transition: color 100ms ease;
    line-height: 1.2em;
    padding: 1px;
    padding-left: 4px;
    padding-right: 4px;
    background: rgba(0, 0, 0, 0.75);
}

.image-card .time_string {
    /* color: #5a5a5a; */
    opacity: 0.0;
}

img.private {
    position: absolute;
    top:4px;
    right: 4px;
    width: 32px;
    height: 32px;
    filter: drop-shadow(0px 0px 1px rgba(255, 255, 255, 1.0)) drop-shadow(0px 0px 4px rgba(255, 255, 255, 0.75));
}

.imglink {
    width: 100%;
    height: 100%;
    /* display: inline-grid; */
}

.image-card:hover .card-bottom  {
    /* opacity: 0.6; */
    background-color: #ffffffcc;
}
.image-card:hover .creator_name  {
    color: black;
    background: none;
}
.image-card:hover .image_opt {
    opacity: 1.0;
}
.image-card:hover .time_string {
    opacity: 1.0;
}

/* Selected */
.image-card.selected {
    background: orange;
}
.image-card.selected .main_image {
    opacity: .3;
}

#image-group-selector-container {
    width: 100%;
    display: flex;
    pointer-events: none;
    position: fixed;
    left: 0px;
    bottom: 0px;
    justify-content: center;
}
#image-group-selector {
    box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.4);
    /* position: fixed; */
    bottom: 0px;
    background: white;
    display: flex;
    left: calc(50vw - 230px);
    border-top-left-radius: 21px;
    border-top-right-radius: 21px;
    pointer-events: auto;
}
#image-group-selector #count {
    font-size: 32px;
    margin: 0px;
    border-right: 1px solid;
    display: flex;
    margin-right: 4px;
}
#image-group-selector #count p {
    margin: 4px;
}
#image-group-selector .image_opt {
    opacity: 1.0;
    width: 42px !important;
    height: 42px !important;
    margin: 4px;
}

@media only screen and (max-width: 1500px) {
    .image-card {
        width: calc(20%);
    }
}

@media only screen and (max-width: 1200px) {
    .image-card {
        width: calc(25%);
    }
}

@media only screen and (max-width: 900px) {

    /* .image-card  */
    
    .image-card {
        width: calc(33.3%);
    }
    
    
}

@media only screen and (max-width: 600px) {
    .image-card {
        width: calc(50% - 2px);
        margin: 1px;
        min-width: none;
        border-s
    }
    .flex_row.image-opts {
        justify-content: space-around;
    }
    .image_opt {
        margin-right: 0px;
    }
    /* Give the card bottom the stlye of being hovered. */
    .card-bottom {
        position: relative;
        background-color: white;
    }
    .image_opt.star_image.liked {
        opacity: 1.0;
    }
    .image-card a.creator_name  {
        color: black;
        background: none;
    }
    .image-card .image_opt {
        opacity: 1.0;
    }
    .image-card .time_string {
        opacity: 1.0;
    }
    .info.flex_row {
        justify-content: space-evenly;
    }
}