#rv_media_body {
    display: flex;
    flex-direction: column;
}

.navbar .dropdown-menu-right {
    right: 0;
    left: auto;
}

.rv-media-container {
    width: 100%;
    min-height: 100%;
    height: 100%;
    font-size: 13px;
    overflow: auto;
    display: flex;
    flex-grow: 1;
    flex-direction: column;

    * {
        font-size: 13px;
    }

    .form-add-folder {
        .input-group-text {
            padding: 0;
        }
    }

    .rv-media-wrapper {
        display: flex;
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
        min-width: 750px;
        flex-grow: 1;

        .rv-media-aside,
        .rv-media-main-wrapper {
            @include lib-css(align-items, stretch);
        }

        .rv-media-main-wrapper {
            @include lib-css(flex-grow, 1);
            display: flex;
            @include lib-css(flex-direction, column);

            .rv-media-main {
                @include lib-css(flex-grow, 1);
                @include lib-css(flex-direction, row);
                display: flex;
                height: 200px;
            }

            .rv-dropdown-actions {
                .dropdown-toggle:after {
                    display: none;
                }
            }
        }
    }

    .rv-btn-add-folder {
        width: 55px;
    }

    .rv-media-items,
    .rv-media-details {
        @include lib-css(align-items, stretch);
        display: flex;
        overflow: auto;
        position: relative;
    }

    .rv-media-items {
        @include lib-css(flex-grow, 1);
        @include lib-css(flex-direction, column);
        @include lib-css(user-select, none);

        .rv-media-item {
            overflow: hidden;
            background-color: rgba($color-lighter-black, 0.3);
        }
    }

    .rv-media-details {
        width: 250px;
        min-width: 250px;
        border-left: 1px solid $color-lighter-black;
        @include lib-css(flex-direction, column);
        @include lib-css(transition, all 0.3s ease-in-out);
        overflow: hidden;
        overflow-y: auto;

        .rv-media-thumbnail,
        .rv-media-description {
            width: 250px;
            min-width: 250px;
        }

        .rv-media-thumbnail {
            border-bottom: 1px solid $color-lighter-black;
            overflow: visible;

            i {
                font-size: 70px;

                &.fa.fa-picture-o {
                    opacity: 0.5;
                }
            }

            img {
                max-width: 90%;
            }
        }

        .rv-media-description {
            padding: 10px;
            position: relative;

            .rv-media-name {
                > p {
                    font-weight: 700;
                    margin: 0;
                }

                + .rv-media-name {
                    margin-top: 5px;
                }

                > span {
                    display: block;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .btn {
                    background: #e5e5e5;
                }
            }
        }
    }

    #media_details_collapse:checked ~ .rv-media-main-wrapper .rv-media-details {
        width: 0;
        min-width: 0;
        border: 0 none;
    }

    #media_details_collapse:checked ~ .rv-media-main-wrapper .rv-media-tools .collapse-panel {
        i {
            @include lib-css(transform, rotate(-180deg));
        }
    }

    @media (max-width: $screen-md-max) {
        .rv-media-details {
            width: 220px;
            min-width: 220px;

            .rv-media-thumbnail,
            .rv-media-description {
                width: 220px;
                min-width: 220px;
            }
        }
    }

    @media (max-width: $screen-sm-max) {
        .rv-media-wrapper .rv-media-main-wrapper {
            width: 100%;
        }
        .rv-media-details {
            width: 200px;
            min-width: 200px;

            .rv-media-thumbnail,
            .rv-media-description {
                width: 200px;
                min-width: 200px;
            }
        }
    }
}