#versions-control-container {

}

.versions-load-buttons-container {
    float: right;
    margin: 15px 15px 5px 15px;
}

    .versions-load-buttons-container button {
        margin-left: 10px;
    }

.versions-scrollview {
    float: left;
    height: 300px;
    width: calc(100% - 30px);
    margin: 0 15px 15px 15px;
}

.versions-container .version {
    float: left;
    position: relative;
    margin: 10px 5px 0px 5px;
    width: calc(100% - 10px);
    border-radius: 5px;
    padding: 5px;
    cursor: pointer;
}
    
    .versions-container .version:nth-of-type(1) {
        margin-top: 5px;
    }
    
    .versions-container .version:nth-last-child(1) {
        margin-bottom: 5px;
    }

    .versions-container .version.active,
    .versions-container .version:hover {
        background-color: #343a40;
    }

    .versions-container .version .version-name {
        margin-left: 5px;
        line-height: 26px;
    }

    /*
        Version state
    */

    .versions-container .version .version-state {
        float: right;
        margin-right: 5px;
        line-height: 26px;
    }
    
        .versions-container :hover .version-state {
            opacity: 0;
            transition: 0.5s;
        }

        .versions-container .version[data-version-state='0'] .version-state {
            color: #ffc107;
        }

        .versions-container .version[data-version-state='1'] .version-state {
            color: #28a745;
        }

        .versions-container .version[data-version-state='2'] .version-state {
            color: #6c757d;
        }

    /*
        Version options
    */

    .versions-container .version .version-options {
        position: absolute;
        top: 0;
        right: 0;
        opacity: 0;
    }

        .versions-container .version .version-options .version-publish-time {
            padding: 1px 5px;
            margin-right: 5px;
            font-size: 12px;
            background: red;
            border-radius: 5px;
        }

            .versions-container .version[data-version-state='0'] .version-options .version-publish-time {
                background: #ffc107;
            }

            .versions-container .version[data-version-state='1'] .version-options .version-publish-time {
                background: #28a745;
            }

            .versions-container .version[data-version-state='2'] .version-options .version-publish-time {
                background: #6c757d;
            }

        .versions-container .version .version-options button {
            width: 26px;
            height: 26px;
            margin: 5px;
        }
    
    .versions-container .version:hover .version-options {
        opacity: 1;
        transition: 0.5s;
    }

    .versions-container .version[data-version-state='0'] .version-options .version-function-button-duplicate,
    .versions-container .version[data-version-state='0'] .version-options .version-function-button-archive {
        display: none;
    }

    .versions-container .version[data-version-state='1'] .version-options .version-function-button-duplicate,
    .versions-container .version[data-version-state='1'] .version-options .version-function-button-delete {
        display: none;
    }

    .versions-container .version[data-version-state='2'] .version-options .version-function-button-archive,
    .versions-container .version[data-version-state='2'] .version-options .version-function-button-delete {
        display: none;
    }