/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Apr 28, 2015, 3:50:16 PM
    Author     : GENIUSCYBER
*/
.form .form-group textarea.error,
.form .form-group select.error,
.form .form-group input.error,
.form .error input, 
.form .error select,
.form .error textarea{border: 1px solid #dd4b39;}

.form .error label{color: #dd4b39;}

.form .error .errorMessage, .errorMessage{color: #dd4b39; font-size: 0.96em; padding-top: 3px;}

.errorSummary ul{padding-left: 20px;}

.pagination > li.first, .pagination > li.last{display: none;}

.m-bottom{margin-bottom: 10px;}

span.required{color: #dd4b39;}

.errorMessage ul{margin: 0; padding: 0 0 0 15px;}
.pageNav a.btn-c{
    border-radius: 50%;
    background: #3d9970;
    color: #fff;
    padding: 6px 12px;
    display: inline-block;
    text-align: center;
}

.pageNav a.btn-c:hover{
    background: #5cb85c;
}

.img-width{
    display: inline-block;
    max-width: 100%;
    height: auto;
}

.overflow{
    text-decoration: none;
    text-overflow: ellipsis;
    display: block; overflow: hidden; 
    white-space: nowrap; 
}

.no-padding{
    padding: 0;
}

.btn {margin-bottom: 2px;}
.list-img-pop li .fileName{
    font-size: 9px;
    line-height: 1;
    overflow: hidden;
    height: 27px;
    word-break: break-word;
}


/*## IMAGE GRID ##*/
.list-items-image{
    padding: 2px;
    margin: 0;
    position: static;
}
.item-image {
    width: 12.5%;
    position: relative;
    float: left;
    padding: 8px;
    margin: 0;
    color: #444;
    cursor: pointer;
    list-style: none;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    box-sizing: border-box;
}
.item-image-preview {
    position: relative;
    box-shadow: inset 0 0 15px rgba(0,0,0,.1), inset 0 0 0 1px rgba(0,0,0,.05);
    background: #eee;
    cursor: pointer;
}
.item-image-preview:before{
    content: "";
    display: block;
    padding-top: 100%;
}
.item-image-preview .thumbnail{
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
    transition: opacity .1s;
}
.item-image-preview .thumbnail:after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
    overflow: hidden;
}
.item-image-preview .thumbnail .centered{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translate(50%,50%);
}
.item-image-preview .thumbnail .centered img{
    transform: translate(-50%,-50%);
}
.item-image-preview .thumbnail img{
    position: absolute;
    top: 0;
    left: 0;
}
.item-image .actions{
    position: absolute;
    bottom: 10px;
    width: 90%;
    color: #fff;
    display: none;
}
.item-image .actions i{ background: #000; border-radius: 50%; width: 30px; height: 30px; line-height: 2;}
.item-image:hover > .actions {display: block;}
.item-image .check{
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    display: none;
}
.item-image .check i{ background: #0073aa; width: 30px; height: 30px; line-height: 2; border: 1px solid #fff;}
.item-image.selector {
    box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px #0073aa;
}
.item-image.selector >.check{
    display: block;
}
.item-image .fileName{
    font-size: 12px;
    line-height: 1;
    overflow: hidden;
    height: 43px;
    padding: 3px 0;
    word-break: break-word;
    background: #000;
    color: #fff;
}

@media only screen and (max-width: 768px) {
    .item-image{width: 33%;}
}

@media only screen and (max-width: 1000px) {
    .item-image{width: 33%;}
}
/*## END IMAGE GRID ##*/