﻿
.gallery {
    margin-top: 10px
}

    .gallery .gallery-items {
        padding: 0;
        margin: 0
    }

        .gallery .gallery-items li.gallery-item {
            float: left;
            width: 120px;
            height: 120px;
            position: relative;
            list-style: none;
            background: #fff;
            border-radius: 2px;
            margin-right: 10px;
            margin-bottom: 10px;
            padding: 10px;
            box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, .05);
            border: 1px solid #e4e6e8
        }

            .gallery .gallery-items li.gallery-item.gallery-add {
                display: block;
                background: #fff;
                box-shadow: none
            }

                .gallery .gallery-items li.gallery-item.gallery-add > a {
                    height: 100%;
                    color: rgba(67, 133, 245, .8);
                    line-height: 100px;
                    font-size: 40px;
                    text-align: center;
                    display: block;
                    transition: color ease .3s;
                    position: relative
                }

                    .gallery .gallery-items li.gallery-item.gallery-add > a:hover {
                        color: #4385f5
                    }

            .gallery .gallery-items li.gallery-item:hover:before {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                background-color: #eff1f7;
                content: ""
            }

            .gallery .gallery-items li.gallery-item > img {
                max-height: 100px;
                max-width: 100px;
                height: auto;
                width: auto;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%)
            }

            .gallery .gallery-items li.gallery-item:hover .toolbar {
                display: block;
                z-index: 9
            }

            .gallery .gallery-items li.gallery-item .toolbar {
                position: absolute;
                display: none;
                right: 0;
                width: 100%;
                height: 30px;
                text-align: right;
                font-size: 20px;
                line-height: 30px;
                bottom: 0;
                background: #4385f5;
                color: #fff
            }

                .gallery .gallery-items li.gallery-item .toolbar a {
                    width: 30px;
                    display: inline-block;
                    text-align: center;
                    color: #fff
                }

            .gallery .gallery-items li.gallery-item a.delete {
                background: #ff3f80;
                color: #fff
            }

        .gallery .gallery-items:after {
            content: "";
            display: table;
            clear: both
        }

.gallery-group-add {
    border-top: 1px solid #eff1f7;
    display: block;
    padding-top: 1rem
}
