#imgselector .sel-picture {
    width: 100px;
    cursor: pointer;
    margin: 2px;
    -webkit-filter: grayscale(100%);
    /* Ch 23+, Saf 6.0+, BB 10.0+ */
    filter: grayscale(100%);
    /* FF 35+ */
}

#imgselector table {
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 69%;
}

#imgselector td {
    border: none;
    padding: 6px;
}

#imgselector .sel-picture:hover {
    -webkit-filter: grayscale(0%);
    /* Ch 23+, Saf 6.0+, BB 10.0+ */
    filter: grayscale(0%);
    /* FF 35+ */
}

#imgselector #pictures {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: space-around;
    position: relative;
    top: 0px;
}

#imgselector #pictures-container {
    position: relative;
    height: 25%;
    overflow: hidden;
}

#imgselector .btn {
    position: absolute;
    z-index: 10;
    color: rgba(220, 220, 220, 0);
    transform: translatex(100%);
    font-size: 50px;
    cursor: pointer;
}

#imgselector .btn:hover {
    color: rgb(150, 150, 150);
    transform: translatex(100%) scale(1.3);
}

#imgselector .show-btn {
    color: rgba(220, 220, 220, 1);
    animation: fadeIn .5s;
}

#imgselector .no-show-btn {
    color: rgba(220, 220, 220, 1);
    animation: fadeOut .5s forwards;
}

#imgselector #upBtn {
    top: 10px;
}

#imgselector #downBtn {
    bottom: 10px;
}


#imgselector .columnL {
    float: left;
    width: 20%;
}

#imgselector .columnR {
    float: right;
    width: 80%;
}

#imgselector .row:after {
    content: "";
    display: table;
    clear: both;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}