/*
http://www.opensource.org/licenses/bsd-license.php New BSD License
*/
/* 
    Created on : 2019.11.27., 23:35:31
    Author     : Szincsák András <andras@szincsak.hu>
*/

aside.sidePane {min-height:86vh;background:#495255; border:1px solid #bbc6ca; border-width:0 1px 0 0px;z-index:4;height:100%;color:#fff;float:left;width:40px;overflow:hidden;cursor:pointer;transition:all .3s ease-in-out}
aside.sidePane #info{max-height:0;overflow:hidden;transition:none}
aside.sidePane .toggleBtn{width:100%;background:transparent;border:none;    text-align:center; padding-top:7px;;display:inline-block;width:40px;height:35px;;color:#fff}
aside.sidePane .toggleBtn .fa{transition:all .5s ease-in-out}
aside.sidePane .paneTitle{display:block;margin-top: 10px;transform:rotate(90deg);color:#ccc;text-transform: initial;background:transparent;transition:color .2s ease-in-out}
aside.sidePane .paneTitle .title{display: none;}

.sidePane.opened{width:20%}
.sidePane.opened #info{max-height:100%;height:100%;    border-top:1px solid #d63031; }
.sidePane.opened .paneTitle{display:inline-block;transform:rotate(0deg);color:#fff;text-transform: uppercase}
.sidePane.opened .paneTitle .title{display: inline-block;}
.sidePane.opened .toggleBtn .fa{transform:rotate(180deg)}


.datarow{padding: 0!Important;margin-left: -10px;}
.datarow div{padding-top:10px}
.datarow div.table{padding:0 6px 0 0px}
.datarow  .blockTitle {cursor:pointer;     padding-bottom: 5px; font-size: .7em;}
.datarow  .blockTitle:hover{background:#fff}
.datarow .user{ color: #fff;background: #8bbbcc;font-size: .8em;border: 1px solid #fff;display: block;word-break: break-word;padding: 3px 2px 3px 5px; margin-bottom: 3px;border-radius: 3px;}
.datarow .user small{color:#333;line-height: 1em;display: block;}
.datarow .user.admin{ color: #fff;background: #4caf50;border-color:#4caf50;  }
.datarow .datatable{width:100%;margin:0;font-size:.6em;white-space:pre}
.datarow .datatable td{padding:3px;line-height:1em;word-break: break-all;white-space: pre-wrap;word-wrap: break-word;}
.datarow .datatable tr:hover{background:#ccc;color:#fff}

.datarow .rois{padding:0 0 10px 0}
.datarow .roiblock{font-size: .7em;border:1px solid #dedede;
    color: #888;
    padding: 0;
    margin-bottom: 1px;}
.datarow .roi{color: #fff;padding: 2px 5px;}

:root {
  --minRangeValue: 100px;
}
.itemList{width: 100%; opacity:0;   height: 77vh;overflow-y: hidden;position:relative;transition: opacity .5s ease-in-out}
.itemList .items{display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--minRangeValue),1fr));     grid-gap: 10px; }
.itemList .imagebox{border:2px solid #d63031;background: #d63031;position: relative}
.itemList .imagebox img{display: block; max-width: 100%;    height: auto;}

.itemList .imagebox .itemData{position:absolute;bottom:0;background:#444444b5;padding:2px 5px;color:#fff;font-size:.6em;width: 100%; height: 20px;}
.itemList .imagebox .deleteLink{
    position: absolute;
    display:none;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
}
.itemList .imagebox:hover .deleteLink{display:block}

.deleteLink{
    background: #d63031;
    text-align: center;
    color: #fff;
    padding: 1px;cursor:pointer;
}
.deleteLink:hover{background:#222}

.iconset .deleteLink{margin:0px 2px;display: inline-block;
    padding: .25rem .5rem;
    font-size: .875rem;
    border-radius: .2rem;}

.boxInfo .deleteLink{ background: transparent; color: inherit;font-size: 1.3em;}
.boxInfo .deleteLink:hover{ background:#d63031;color: #fff;}
.track{display:block;background: #495255;
    color: #fff;
    font-size: .8em;
    padding: 5px 10px;}


.sectionLocked{color: #fff;background: #d63031;display: block;margin: 20px auto;    width: 50%;    text-align: center;padding: 40px;  }
.sectionLocked h2{font-size: 2.3em; color: #fff;}
.sectionLocked .fa-lock  {font-size: 3em;margin-top: 40px;}
.sectionLocked p{  line-height: 1.2em;    margin-bottom: 10px;}