/* slides panel layout */
.slides-panel {
    left: 20px;
    top: 20px;
    width: 294px;
    height: calc(100% - 40px);
    position: absolute;
    z-index: 1;
}

.slides-panel-toolbar {
    width: 100%;
    height: 48px;
}

.slides-panel-toolbar-title {
    cursor: default;
}

.slides-panel-toolbar-undo-button {
    right: 44px;
    top: 10px;
    width: 24px;
    height: 24px;
    position: absolute;
}

.slides-panel-toolbar-redo-button {
    right: 18px;
    top: 10px;
    width: 24px;
    height: 24px;
    position: absolute;
}

/* slides collection layout */
.slides-collection {
    margin: 18px 0 0 18px;
    height: calc(100% - 48px - 72px - 18px);
    position: relative;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .slides-collection {
        margin: 18px 6px 0 18px;
    }
}

.slides-collection::-webkit-scrollbar {
    width: 6px;
}

.slides-collection-item {
    width: 258px;
    height: 71px;
    display: block;
    position: relative;
    z-index: 0; /* fix a bug of draggable elements in Chrome */
}

.slides-collection-item-drag-over {
    height: 115px;
}

.slides-collection-item-dragging {
}

.slides-collection-item-dragging-covered {
    height: 25px;
}

.slides-collection-item-background {
    bottom: 5px;
    width: 258px;
    height: 66px;
    position: absolute;
}

.slides-collection-item-thumbnail {
    top: 8px;
    left: 8px;
    width: 70px;
    height: 52px;
    margin: 0 24px 0 0;
    position: absolute;
}

.slides-collection-item-thumbnail-image {
    position: absolute;
}

.slides-collection-item-update-message {
    top: 8px;
    left: 8px;
    width: 70px;
    height: 52px;
    margin: 0 24px 0 0;
    position: absolute;
}

.slides-collection-item-update-message-text {
    top: 18px;
    left: 0;
    width: 100%;
    margin: 0;
    position: absolute;
}

.slides-collection-item-input {
    top: 24px;
    left: 102px;
    width: 125px;
    position: relative;
}

.slides-collection-item-input-icon {
    top: 22px;
    left: 210px;
    width: 20px;
    height: 20px;
    position: absolute;
}

.slides-collection-item-delete-button {
    right: 4px;
    top: 4px;
    width: 24px;
    height: 24px;
    position: absolute;
}

/* slides panel bottom bar layout */
.slides-panel-bottom-bar {
    right: 0;
    bottom: 0;
    width: 100%;
    height: 72px;
    position: absolute;
}

.slides-panel-bottom-bar-new-button {
    width: calc(100% - 36px);
    height: 36px;
    margin: 18px;
}

/* slides panel style */
.slides-panel {
    border-radius: 5px;
    background-color: rgba(33,33,33,0.8);
    overflow: hidden;
    opacity: 0.0;
    pointer-events: none;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5 ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.slides-panel-open {
    opacity: 1.0;
    pointer-events: all;
}

/* slides panel toolbar style */
.slides-panel-toolbar {
    background-color: #222222;
}

.slides-panel-toolbar {
    background-color: #222222;
}

.slides-panel-toolbar-title {
    left: 18px;
    top: 18px;
    position: absolute;
}

.slides-panel-toolbar-button {
    border: none;
    background-color: transparent;
    opacity: 0.8;
}

.slides-panel-toolbar-button:hover {
    opacity: 1.0;
}

.slides-panel-toolbar-button:disabled {
    opacity: 0.3;
}

.slides-panel-toolbar-undo-button {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4NCiAgPGc+DQogICAgPHBhdGggZD0iTTExLjUsMjAuNWE4LjQ4LDguNDgsMCwwLDEtNy4xNC0zLjg4LDAuNSwwLjUsMCwxLDEsLjg0LTAuNTQsNy41LDcuNSwwLDEsMCwuMDgtOC4yNywwLjUsMC41LDAsMCwxLS44My0wLjU2QTguNSw4LjUsMCwxLDEsMTEuNSwyMC41WiIgc3Ryb2tlPSJ3aGl0ZSIvPg0KICAgIDxwYXRoIGQ9Ik04LjA2LDguMDdINFY0QTAuNSwwLjUsMCwwLDEsNSw0VjcuMDdIOC4wNkEwLjUsMC41LDAsMCwxLDguMDYsOC4wN1oiIHN0cm9rZT0id2hpdGUiLz4NCiAgPC9nPg0KPC9zdmc+DQoNCg==')
}

.slides-panel-toolbar-redo-button {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4NCiAgPGc+DQogICAgPHBhdGggZD0iTTEyLjUsMjAuNWE4LjQ4LDguNDgsMCwwLDAsNy4xNC0zLjg4LDAuNSwwLjUsMCwxLDAtLjg0LTAuNTQsNy41LDcuNSwwLDEsMS0uMDgtOC4yNywwLjUsMC41LDAsMCwwLC44My0wLjU2QTguNSw4LjUsMCwxLDAsMTIuNSwyMC41WiIgc3Ryb2tlPSJ3aGl0ZSIvPg0KICAgIDxwYXRoIGQ9Ik0xNS45NCw4LjA3SDIwVjRhMC41LDAuNSwwLDEsMC0xLDBWNy4wN0gxNS45NEEwLjUsMC41LDAsMCwwLDE1Ljk0LDguMDdaIiBzdHJva2U9IndoaXRlIi8+DQogIDwvZz4NCjwvc3ZnPg0KDQo=');
}

/* slide collection style */
.slides-collection {
    background-color: transparent;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
}

.slides-collection::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 0;
}

.slides-collection::-webkit-scrollbar-thumb {
    background: #222222;
    border-radius: 4px;
}

.slides-collection::-webkit-scrollbar-thumb:hover {
    background-color: #444444;
}

.slides-collection::-webkit-resizer {
    background-color: #222222;
}

.slides-collection::-webkit-scrollbar-corner {
    background-color: #222222;
}

.slides-collection-item {
    cursor: pointer;
}

.slides-collection-item-drag-over {
    border-top: solid;
    border-top-color: white;
    border-top-width: 2px;
}

.slides-collection-item-dragging {
    opacity: 0.0;
}

.slides-collection-item-background {
    background-color: #333333;
    border-radius: 3px;
    border-style: solid;
    border-width: 0;
}

.slides-collection-item-background-selected {
    background-color: #737373;
}

.slides-collection-item-thumbnail {
    overflow: hidden;
    border-radius: 2px;
    pointer-events: none;
}

.slides-collection-item-thumbnail-image {
    transform-origin: 0 -25%;
    transform: scale(0.5, 0.5);
}

.slides-collection-item-update-message {
    border-radius: 2px;
    pointer-events: none;
    opacity: 0.0;

    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -ms-transition: opacity 0.2 ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}

.slides-collection-item-update-message-open {
    background: rgba(34, 34, 34, 0.8);
    pointer-events: all;
    opacity: 1.0;
}

.slides-collection-item-update-message-text {
    text-align: center;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2px;
    color: #ffffff;
}

.slides-collection-item-input {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #fff;
    text-overflow: ellipsis;
    background-color: transparent;
    background-size: 3px 1px;
    background-repeat: repeat-x;
    background-position: bottom;
    border: none;
    cursor: text;
    outline: none;
}

.slides-collection-item-input:disabled {
    cursor: default;
}

.slides-collection-item-input-waiting-input {
    font-weight: 500 !important;
    letter-spacing: 0.2px;
    background-image: linear-gradient(to right, #fff 40%, rgba(255, 255, 255, 0) 40%);
}

.slides-collection-item-input:hover:enabled {
    background-image: linear-gradient(to right, #fff 40%, rgba(255, 255, 255, 0) 40%);
}

.slides-collection-item-input:focus {
    font-weight: 500;
    letter-spacing: 0.2px;
    background-image: linear-gradient(to right, #fff 40%, rgba(255, 255, 255, 0) 40%);
}

.slides-collection-item-input-read-only {
    pointer-events: none;
}

.slides-collection-item-input-icon {
    background-color: transparent;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4NCiAgPHBhdGggZD0iTTE4LjIsOC44NkwxOS41Niw3LjVhMC45MywwLjkzLDAsMCwwLDAtMS4zMUwxNy40Nyw0LjFhMC45MywwLjkzLDAsMCwwLTEuMzEsMEwxNC44LDUuNDZaIiBzdHJva2U9IndoaXRlIiBmaWxsPSJ3aGl0ZSIvPg0KICA8cG9seWdvbiBwb2ludHM9IjMuOCAxOS45NCA4LjQxIDE4LjczIDUuMDEgMTUuMzMgMy44IDE5Ljk0IiBzdHJva2U9IndoaXRlIiBmaWxsPSJ3aGl0ZSIvPg0KICA8cmVjdCB4PSI2LjY1IiB5PSI5LjY0IiB3aWR0aD0iOS44OCIgaGVpZ2h0PSI0LjgxIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNS4xMiAxMS43Mikgcm90YXRlKC00NSkiIHN0cm9rZT0id2hpdGUiIGZpbGw9IndoaXRlIi8+DQo8L3N2Zz4NCg==');
    background-size: contain;
    pointer-events: none;
}

.slides-collection-item-delete-button {
    background-color: transparent;
    background-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0iZmluYWxzXzI0cHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPg0KICA8dGl0bGU+aWNvbjwvdGl0bGU+DQogIDxnIGlkPSJfR3JvdXBfIiBkYXRhLW5hbWU9IiZsdDtHcm91cCZndDsiPg0KICAgIDxwYXRoIGQ9Ik03LjMxLDE3LjVBMC41LDAuNSwwLDAsMSw3LDE2LjY1bDEwLTEwYTAuNSwwLjUsMCwwLDEsLjcxLjcxbC0xMCwxMEEwLjUsMC41LDAsMCwxLDcuMzEsMTcuNVoiIGZpbGw9IiNmZmZmZmYiLz4NCiAgICA8cGF0aCBkPSJNMTcuMzEsMTcuNUEwLjUsMC41LDAsMCwxLDE3LDE3LjM1TDcsNy4zNWEwLjUsMC41LDAsMCwxLC43MS0wLjcxbDEwLDEwQTAuNSwwLjUsMCwwLDEsMTcuMzEsMTcuNVoiIGZpbGw9IiNmZmZmZmYiLz4NCiAgPC9nPg0KPC9zdmc+DQo=');
    outline: none;
    border: none;
    opacity: 0.5;
}

.slides-collection-item-delete-button:hover {
    opacity: 1.0;
}

/* slides panel bottom bar style */
.slides-panel-bottom-bar {
    background-color: #222222;
}

.slides-panel-bottom-bar-new-button {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.2px;
    color: #fff;
    border: none;
    border-radius: 3px;
    background-color: #4e4e4e;
}

.slides-panel-bottom-bar-new-button:hover {
    text-shadow: rgba(255,255,255,0.8) 0 0 10px;
}