body,html{padding:0;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}a{color:inherit;text-decoration:none}*{box-sizing:border-box}:root{--primary:#f0f0dc;--secondary:#aad2eb;--text:#828278}.main-container{background-color:#fff;min-height:100vh;height:auto;width:100vw;position:relative;display:flex;flex-flow:row nowrap}.sidebar-wrapper{border-right:4px ridge var(--primary);box-shadow:inset 0 0 20px 5px rgba(0,0,0,.2);background-color:#fff}.sidebar{padding:30px 20px;position:relative;width:300px;min-width:300px;max-width:300px;min-height:100vh;flex:1 1}.sidebar hr{margin:40px 0 20px}.sidebar h2{margin:0 0 40px;font-size:20px}.sidebar h2,.sidebar h3{text-align:center;font-weight:400}.sidebar h3{margin:0;font-size:16px}input,select{width:100%;height:30px;font-size:12px}input{outline:3px ridge transparent;border:1px ridge var(--primary);padding:5px 10px;box-shadow:2px 2px 2px 1px rgba(0,0,0,.2)}input:focus{outline:3px ridge var(--primary)}.sidebar ul{list-style:none;padding:0;margin:30px 0 0;flex-flow:column nowrap;justify-content:center}.sidebar ul,.sidebar ul li{display:flex;align-items:center}.sidebar ul li{flex:1 1;justify-content:flex-start;padding-left:10px;height:40px;color:var(--text);border-left:1px ridge var(--text);width:100%;text-align:left}.sidebar ul li:hover{color:var(--primary);background-color:var(--text);cursor:pointer}.sidebar ul li.selected{background-color:var(--text)}.sidebar ul li.selected,.sidebar ul li.selected:hover{color:var(--secondary);cursor:default}.main-area-thumbnails{flex:1 1;display:flex;flex-flow:row nowrap;justify-content:space-aroud;align-items:center;height:auto;min-height:150px;background-color:var(--primary)}.thumbnails-container{flex:1 1;display:flex;flex-flow:row wrap;justify-content:space-around;align-items:center;height:100%;box-shadow:inset 0 0 10px 1px rgba(0,0,0,.2);padding:10px}.thumbnails-container.optimized{background-color:rgba(0,0,0,.2)}.thumbnails-container .thumbnail-image{flex:1 1;display:flex;justify-content:center;align-items:center;width:90px;max-width:90px;min-width:90px;height:90px;max-height:90px;min-height:90px;overflow:hidden;position:relative;box-shadow:2px 2px 5px 1px rgba(0,0,0,.2);border:2px solid transparent}.thumbnails-container .thumbnail-image .thumbnail-size{position:absolute;top:0;left:0;width:100%;height:20px;font-size:12px;color:#fff;background-color:var(--text)}.thumbnails-container .thumbnail-image img{width:100%}.thumbnails-container .thumbnail-image:hover{border:2px solid var(--text);cursor:pointer}.thumbnails-container.optimized .thumbnail-image:hover{border:2px solid var(--primary)}.main-area{display:flex;flex:1 1;flex-flow:column nowrap;box-shadow:inset 0 0 50px 10px rgba(0,0,0,.2)}.main-area h2.page-title{margin:20px auto 0;text-align:center;color:var(--text)}.main-area .main-area-image-info{padding:10px 20px;width:100%;min-height:120px;display:flex;flex-flow:column nowrap;font-size:14px}.main-area .main-area-image-info h4{margin:20px 0 0;color:var(--text);display:flex;flex-flow:row nowrap;align-item:center}.main-area .main-area-image-info p{margin:10px 0 0}.main-area .main-area-image-info a{color:var(--secondary);width:100%}.main-area .main-area-image-info .collapse-btn{margin-top:-1px;margin-left:10px;width:20px;max-width:20px;min-width:20px;height:20px;max-height:20px;min-height:20px}.main-area-images{flex:1 1;display:flex;flex-flow:row nowrap;justify-content:space-around;align-items:center;height:auto;min-height:calc(100vh - 330px)}.main-area-images .image-container{flex:1 1;display:flex;justify-content:center;align-items:center;width:300px;min-width:300px;max-width:300px;height:200px;min-height:200px;max-height:200px;border:4px dashed var(--text);overflow-y:hidden;box-shadow:5px 5px 2px 1px rgba(0,0,0,.1)}.main-area-images .image-info-container{display:flex;flex-flow:row nowrap;justify-content:space-between;font-size:14px;color:var(--text)}.main-area-images .image-info-container .image-info-size{background-color:var(--primary);padding:0 10px}.main-area-images .image-info-container .image-info-size-total{color:#fff;background-color:var(--secondary);padding:0 10px}.main-area-images .image-container img{width:100%}@media screen and (max-width:1025px){.main-area-images{flex-flow:column nowrap;height:100%;min-height:unset;margin:50px 0}.image-container-wrapper{margin-bottom:25px}.thumbnails-container{flex-flow:column wrap;height:100%;min-height:unset}}@media screen and (max-width:700px){.main-container{flex-flow:column nowrap}.sidebar-wrapper{width:100%;display:flex;justify-content:center}.sidebar{min-height:unset}}