div[layer-selector],
layer-selector {
    height: 100%;
}

.layer-selector-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.layer-selector-header-container {
    flex-grow: 0;
    background-color: white;
    border-bottom: 1px solid black;
    width: 100%;
}
.layer-selector-header {
    padding: 5px;
}
.layer-selector-header>table {
    width: 100%;
}
.layer-selector-header label {
    font-size: 80%;
}
.opacity-slider {
  width: 65%;
}
#lock-opacity-icon {
    border: 1px solid black;
}
.layer-selector-footer-container {
    flex-grow: 0;
    background-color: white;
    border-top: 1px solid black;
    width: 100%;
}
.layer-selector-footer {
    padding: 5px;
}
.layer-selector-footer input[type=button] {
    background-color: white;
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid black;
    border-radius: 3px;
    width: 30px;
    height: 25px;
    cursor: pointer;
}
.layer-selector-footer input[type=button]:hover:not(:disabled) {
    background-color: rgb(223,223,223);
}
.layer-selector-footer input[type=button]:active {
    background-color: rgb(191,191,191);
}
#new-layer-button {
    background-image: url('../../resources/new-layer.png');
    background-size: auto 16px;
}
#new-layer-button:disabled {
    background-image: linear-gradient(to bottom, rgba(127,127,127, 0.5), rgba(127,127,127, 0.5)), url('../../resources/new-layer.png');
    background-size: auto, auto 16px;
}
#merge-down-button {
    background-image: url('../../resources/merge-down.png');
    background-size: auto 16px;
}
#merge-down-button:disabled {
    background-image: linear-gradient(to bottom, rgba(127,127,127, 0.5), rgba(127,127,127, 0.5)), url('../../resources/merge-down.png');
    background-size: auto, auto 16px;
}
#duplicate-layer-button {
    background-image: url('../../resources/duplicate-layer.png');
    background-size: auto 16px;
}
#duplicate-layer-button:disabled {
    background-image: linear-gradient(to bottom, rgba(127,127,127, 0.5), rgba(127,127,127, 0.5)), url('../../resources/duplicate-layer.png');
    background-size: auto, auto 16px;
}
#delete-layer-button {
    background-image: url('../../resources/delete-layer.png');
    background-size: auto 16px;
}
#delete-layer-button:disabled {
    background-image: linear-gradient(to bottom, rgba(127,127,127, 0.5), rgba(127,127,127, 0.5)), url('../../resources/delete-layer.png');
    background-size: auto, auto 16px;
}
#undo-button {
    background-image: url('../../resources/undo.png');
    background-size: auto 16px;
}
#undo-button:disabled {
    background-image: linear-gradient(to bottom, rgba(127,127,127, 0.5), rgba(127,127,127, 0.5)), url('../../resources/undo.png');
    background-size: auto, auto 16px;
}
#redo-button {
    background-image: url('../../resources/redo.png');
    background-size: auto 16px;
}
#redo-button:disabled {
    background-image: linear-gradient(to bottom, rgba(127,127,127, 0.5), rgba(127,127,127, 0.5)), url('../../resources/redo.png');
    background-size: auto, auto 16px;
}
.layer-selector-content-container {
    flex-grow: 1;
    overflow-y: scroll;
}
.layer-selector-content {
    position: absolute
    top: 0
    left: 0
    right: 0
    bottom: 0
    overflow: auto
}
.layer-selector-list {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

div[layer-selector]>ul,
layer-selector>ul {
}

.layer-item {
    background-color: white;
    display: block;
    width: 100%;
    height: 75px;
    border-bottom: 1px solid black;
    vertical-align: top;
    position: relative;
    box-shadow: 3px 3px 3px #07162D, 0px 0px 1px #07162D;
}
.placeholder {
    display: block;
    width: 100%;
    height: 75px;
    border-bottom: 1px solid black;
    vertical-align: top;
    position: relative;
}
.layer-item canvas {
    width: 35%;
}
.layer-item-info {
    position: absolute;
    top: 0px;
    left: 35%;
    display: inline-block;
    padding: 5px;
}

.layer-item.ui-sortable-helper {
    border: 1px solid black;
    box-shadow: 5px 5px 5px #07162D, 0px 0px 1px #07162D;
}
.layer-item.selected {
    background-color: rgb(223,223,223);
}

.layer-item-info label {
    display: block;
    width: 100%;
    text-overflow: ellipsis;
    word-break: break-all;
}
.layer-item-info input {
    display: block;
    width: 100%;
}