.system-content-warning {
    background-color: @brand-warning;
    color: #fff;
    padding: @padding-base-vertical @baseMargin;
    margin: 0 -@baseMargin;

    a {
        &:hover {
            color: @link-hover-color;
        }

        color: inherit;
        text-decoration: underline;
    }
}

.edit-page {
    .system-content-warning {
        display: none;
    }
}

body {
    &.cg-system_content_group,
    &.cat-meta,
    &.name-administrator,
    &.system-content {

        .system-content-warning {
            display: block;
        }

        .navbar > div {
            border-bottom: 4px solid @brand-warning;
        }

        #sidebar-publish-page {
            .widget-content {
                border-top: 1px solid @brand-warning;
            }
        }
    }

    &.system-content {
        .system-content-warning {
            margin-top: -24px;
            margin-bottom: 20px;
        }
    }
}

.tab-pane {
    > .nav-tabs {
        margin-top: 10px;
    }
}

ul.media {
    @_item_spacing: 10px;
    margin: 0;

    > li {
        @_padding: 5px;
        @_image_width: 180px; // set in mediaclass.config
        @_image_height: 180px; // set in mediaclass.config

        @_width: @_image_width; // add border
        @_height: @_image_height;

        margin: 0 @_item_spacing @_item_spacing 0;
        background: @gray;
        width: @_width;
        height: @_height;
        float: left;
        position: relative;
        // padding: @_padding;
        // border: 1px solid @borderColorMedium;
        border-radius: @radiusBlockElement;
        position: relative;
        overflow: hidden;

        &.sortable {
            cursor: move;
        }
        figure {
            position: relative;
            margin: auto;
        }
        img {
            display: block;
            width: 100%;
            height: 100%;

            border: 1px solid @borderColorLight; 
            // max-width: @_image_width;
            // margin: auto;
        }
        .z-btn-remove {
            position: absolute;
            top: 6px;
            right: 6px;
            background: rgb(240,240,240,0.5);
            border-radius: 50%;
            width: 20px;
            height: 20px;

            &::before {
                font-size: 20px;
            }
        }
        .bottom {
            position: absolute;
            padding: @_padding;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(255,255,255,0.5);

            .caption {
                height: @roundBtnSize;
                overflow: hidden;

                a {
                    word-break: break-all;
                    display: block;
                    height: @roundBtnSize;
                    max-height: @roundBtnSize;
                    text-overflow: ellipsis;
                    line-height: @roundBtnSize;
                    width: @_image_width - @roundBtnSize - 3;
                    vertical-align: text-top;
                    color: white;
                    text-shadow: 2px 2px black;
                }
            }
        }
    }

    > li.ui-sortable-placeholder {
        &:extend(.z-drag-drop-placeholder);
    }
}

@_leaderImageWidth: 80px;
@_leaderImageHeight: 60px;

.edit-page {
    .admin-container {
        margin-top: @topbarHeight;
    }
    .admin-header {
        .admin-header-meta {
            margin: 0 -@baseMargin 0 -@baseMargin;
            padding: @baseMargin;
        }
        h2 {
            margin-bottom: 10px;
        }
        .admin-btn-category {
            font-size: 12px;
        }
        .admin-btn-category {
            margin-top: -2px;
        }
        .admin-edit-dates {
            &,
            a {
                color: @textColorLight;
            }
            a {
                text-decoration: underline;
            }
        }
        .admin-header-has-image {
            padding-left: @_leaderImageWidth + 20px;
        }
    }
}

/* small image in admin edit */
img.mediaclass-admin-leader-image {
    background-color: @backgroundColorLighter;
    float: left;
    width: @_leaderImageWidth;
    height: @_leaderImageHeight;
}

.admin-edit-media {
    background: white;
    padding: 0;
    margin: 0 0 10px 0;
    &:extend(.admin-image-border);
}

input[type='date'] {
    width: auto;
    display: inline;
}
input[type='time'] {
    width: auto;
    display: inline;
}

#sidebar-date-range .tab-content {
    overflow: visible;
}

.navbar.admin-navbar-fixed-save {
    @_transation_duration: 0.3s;
    
    z-index: 1000;
    opacity: 0;
    position: fixed;
    display: none;
    top: @topbarHeight;
    border-radius: 0;
    padding: @widgetVerticalPadding @widgetSidePadding;
    background-color: @backgroundColorInfo;
    -webkit-transition: opacity @_transation_duration ease-in-out;
    -moz-transition: opacity @_transation_duration ease-in-out;
    -o-transition: opacity @_transation_duration ease-in-out;
    transition: opacity @_transation_duration ease-in-out;
    min-height: inherit;
    #3L > .box-shadow(none);
}

.scrolled .admin-navbar-fixed-save {
    display: block;
    opacity: 1.0;
}

div + .admin-edit-no-features {
    display: none;
}

.edit-message {
    background-color: @backgroundColorInfo;
    border-color: @backgroundColorInfo;
    color: @textColorButton;
    
    .btn {
        margin-top: -2px;
    }
}

@media (max-width: @breakpointMediumMaxWidth) {
    .admin-navbar-fixed-save {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
    }
}