.images-collection {position:relative;}
.images-collection .upload-help {border: 1px solid #d9d9d9; padding:5px; position:relative;}
.images-collection .upload-help small {display:block; color:#888; margin-top:5px;}
.images-collection .upload-help .dd-helper {transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; z-index:-1; position:absolute; left:-20px; right:-20px; top:-20px; bottom:-20px; opacity:0; background:#fff; border:3px dashed #97cfec; color:#97cfec; font-size:18px; text-align:center;}
.images-collection .upload-help .dd-helper.visible {opacity:0.9; display:block; z-index:1;}
.images-collection .upload-help .dd-helper span {display:inline-block; height:100%; width:0; vertical-align:middle;}
.images-collection .icons {max-width:688px; border:1px dotted #d9d9d9; position:relative; margin-top:10px; transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; background-position:center bottom;}
.images-collection .icons:after {display:block; width:100%; height:0; clear:both; content:"";}
.images-collection .icons.visible-dd-help {border-color:#97cfec; padding-bottom:60px; background:url('/images/drag-over.png') center bottom no-repeat;}
.images-collection .icons .icon {display:block; position:relative; float:left; width:150px; padding:5px; border:1px solid #e4e4e4; background:#fff; margin:5px;}
.images-collection .icons .icon {box-shadow:1px 1px 3px #efefef;}
.images-collection .icons .icon .preview {height:100px; overflow:hidden;}
.images-collection .icons .icon .preview.loading {position:relative;}
.images-collection .icons .icon .preview.loading:before {content:""; display:block; position:absolute; left:0; top:0; width:100%; height:100%; background:url('/images/loading.gif') center no-repeat #fff; opacity:0.5;}

.images-collection .fields {margin-top:5px;}
.images-collection .fields > * {margin:3px 0 3px;}
.images-collection .fields > *:first-child {margin-top:0;}
.images-collection .fields > *:last-child {margin-bottom:0;}
.images-collection .fields input[type="text"] {width:146px; display:block;}
.images-collection .fields textarea {width:148px; height:50px; display:block; transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; resize:none; position:relative; left:0;}
.images-collection .fields textarea:focus {width:300px; z-index:1000; left:-75px;}
.images-collection .fields label {display:block; cursor:pointer;}
.images-collection .fields label > * {vertical-align:middle;}
.images-collection .fields label input {margin-right:5px;}
.images-collection .fields input.video-select {background:url('/templates/fbrt/images/video-icon.png') 130px 1px no-repeat; border: 1px solid #aaa; width:125px; padding-right:23px;}

.images-collection .buttons {position:absolute; z-index:100; top:-10px; right:7px; opacity:0; width:100%; height:0; text-align:right; overflow:hidden; transition:all 0.2s ease; -webkit-transition:all 0.2s ease; -moz-transition:all 0.2s ease;}
.images-collection .buttons > * {margin:0 3px;}
.images-collection .buttons > *:first-child {margin-left:0;}
.images-collection .buttons > *:last-child {margin-right:0;}
.images-collection .buttons a.delete {width:24px; height:24px; background:url('/images/delete_image.png') no-repeat; display:inline-block;}
.images-collection .buttons a.crop {width:24px; height:24px; background:url('/images/crop_image.png') no-repeat; display:inline-block;}
.images-collection .buttons a.sort {width:24px; height:24px; background:url('/images/sort_image.png') no-repeat; display:inline-block;}

.images-collection .icon.deleted {overflow:hidden; opacity:0.5; box-shadow:none; cursor:pointer; transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease;}
.images-collection .icon.deleted:before {content:"Фотография удалена. Восстановить?"; display:block; width:100%; height:100%; left:0; top:0; position:absolute; background:rgba(0, 0, 0, 0.3);}
.images-collection .icon.deleted:before {text-shadow:0px 0px 3px black; padding-top:40px; text-align:center; font-weight:bold; color:#fff; z-index:1000;}
.images-collection .icon.deleted .buttons {display:none;}
.images-collection .icon:hover {box-shadow:1px 1px 6px #dddddd;}
.images-collection .icon:hover .buttons {top:7px; opacity:1; height:25px;}

.images-collection-editor {overflow:hidden; position:fixed; top:50%; left:50%;background:#fff; border:1px solid #a5a5a5; padding:3px; transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease;}
.images-collection-editor select {position:relative; width:99.9%; margin:0; box-sizing:content-box;}
.images-collection-editor .image-field {position:relative; border-top:1px solid #a5a5a5; overflow:hidden; transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease;}
.images-collection-editor .crop-select {position:absolute; left:0; top:0; cursor:move; border:1px dashed #888; box-sizing:border-box;}

.images-collection-editor .crop-select:before {content:""; position:absolute; display:block; width:2000px; height:5000px; left:-2000px; top:-2500px; background:rgba(0,0,0,0.6);}
.images-collection-editor .crop-select:after {content:""; position:absolute; display:block; width:2000px; height:5000px; right:-2000px; top:-2500px; background:rgba(0,0,0,0.6);}

/* --------------------------------------- */

.image-collection-table-view {width:160px;}
.image-collection-table-view img {float:left; margin:0 5px 5px 0; max-width:75px; max-height:100px;}
.image-collection-table-view img:first-child, .image-collection-table-view img:nth-child(2n+1) {clear:left;}