body {
    margin: 0;
    padding: 0;
    background-color: black;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    --share--size: 100px;
}

#share {
    position: absolute;
    left: 20%;
    top: 0px;
    height: var(--share--size);
    width: 60%;
    cursor: url("../pictures/icons/cursor-shareinv.png"), pointer;
    /* border: 2px solid green; */
    box-sizing: border-box;
}

#legend {
    position: absolute;
    bottom: -20px;
    left: 0px;
    width: 100%;
    height: 20px;
    box-sizing: border-box;
    text-align: center;
    color: white;
}

#frame {
    height: calc(100% - 150px);
    flex-grow: 1;
    flex-shrink: 1;
    box-sizing: border-box;
    padding: 5px 5% 40px;
    position: relative;
    display: flex;
    flex-direction: column;
}

#display {
    opacity: 1;
    transition: opacity .5s;
    max-height: 100%;
    position: relative;
    margin: auto;
}

#projo {
    max-width: 100%;
    max-height: 100%;
}

#play {
    position: absolute;
    bottom: calc(50% - 64px);
    right: calc(50% - 64px);
    background-image: url("../pictures/icons/play.png");
    width: 128px;
    height: 128px;
    display: none;
}

#bottom {
    box-sizing: border-box;
    padding: 10px 20px;
    position: relative;
    flex: none;
}

#photolist::-webkit-scrollbar {
    height: 16px;
}

#photolist::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 8px;
}

#photolist::-webkit-scrollbar-thumb {
    background: grey;
    border-radius: 8px;
}


#photolist {
    display: flex;
    overflow-x: auto;
    flex-direction: row;
    justify-content: space-between;
}

#showprev {
    position: absolute;
    left: 0px;
    top: var(--share--size);
    height: calc(100% - var(--share--size));
    width: 20%;
    /* cursor: url("../pictures/icons/cursor-left.png"), pointer; */
    /* border: 2px solid red; */
    box-sizing: border-box;
 }

 .commandbox {
    position: absolute;
    flex-wrap: wrap;
    justify-content: center;
    /* border: 2px solid yellow; */
    box-sizing: border-box;
 }

 #maincmds {
    display: flex;
    align-content: flex-end;
    left: 20%;
    bottom: -12px;
    height: 30%;
    width: 60%;
    opacity: 0;
    transition: opacity 1s;
 }
 
 #showcmds {
    align-content: center;
    left: 20%;
    top: var(--share--size);
    height: calc(100% - var(--share--size));
    width: 60%;
    display: none;
 }

#maincmds:hover {
    opacity: 1;
}

.commands {
    height: 38px;
    border: 2px solid rgb(95, 95, 95);
    box-sizing: border-box;
    border-radius: 17px;
    background-color: rgb(54, 54, 54);
    display: flex;
    align-content: center;
    justify-content: space-around;
    flex-wrap: wrap;
}

#mainbar {
    width: 350px;
    flex: none;
}

#showbar {
    width: 150px;
    visibility: hidden;
}

.command {
    width: 30px;
    height: 30px;
    border: 2px solid rgb(120, 120, 120);
    box-sizing: border-box;
    background-size: 24px;
    background-color: rgb(54,54,54);
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 3px;
    cursor: pointer;
 }
 .command:hover {
    background-color: rgb(80,80,80);
 }

#close , #showexit {
    background-image: url("../pictures/icons/close.png");
}

#pin {
    background-image: url("../pictures/icons/pin.png");
}

#prev {
    background-image: url("../pictures/icons/prev.png");
}

#next {
    background-image: url("../pictures/icons/next.png");
}

#exit {
    background-image: url("../pictures/icons/exit.png");
}

#delete {
    background-image: url("../pictures/icons/trash.png");
}

#comment {
    background-image: url("../pictures/icons/wedit.png");
}

#download {
    background-image: url("../pictures/icons/download.png");
}

#show , #showstart {
    background-image: url("../pictures/icons/show.png");
}

#ok {
    background-image: url("../pictures/icons/OK.png");
}

#shownext {
    position: absolute;
    right: 0px;
    top: var(--share--size);
    height: calc(100% - var(--share--size));
    width: 20%;
    /* border: 2px solid red; */
    box-sizing: border-box;
 }

#start {
    position: absolute;
    left: 20px;
    top: 10px;
    height: 84px;
    width: 30px;
    background-image: linear-gradient(to right, black, rgba(0, 0, 0, 0));
}

#end {
    position: absolute;
    right: 20px;
    top: 10px;
    height: 84px;
    width: 30px;
    background-image: linear-gradient(to left, black, rgba(0, 0, 0, 0));
}

.photo {
    width: 100px;
    height: 60px;
    margin: 5px;
    padding: 5px;
    border: 2px solid black;
    transition: border-color 1s;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: none;
    position: relative;
    cursor: pointer;
}

.video {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-image: url("../pictures/icons/show.png");
    width: 24px;
    height: 24px;
    background-size: 24px;
}

.photo:hover {
    border-color: grey;
}

.current {
    border-color: white;
}

.photo img {
    max-height: 95%;
    margin: auto;
    display: block;
}

#commands-model {
    display: none;
}

#maskother {
    z-index: 1079;
    background-color: black;
    opacity: 0.8;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    visibility: hidden;  
}

#contentother {
    z-index: 1080;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    visibility: hidden;  
    display: flex;
    align-items: center;
    justify-content: center;
}

.comment-box{
    display: flex;
    background-color: white;
    opacity: 1;
}