/*
form div.photoselectSearch {
    border: solid #ccc 1px;
    margin: 0 0 10px 105px;
    padding: 6px;
    background-color: #F0F3F8;
    width: 300px;
}

form div.filerPhotoPool div.photoselectSearch input {
    width: 180px;
}
*/

form ul.photoselectInput {
    list-style: none;
    margin: 0 0 0 105px;
    padding: 0;
    max-height: 550px;
    overflow: auto;
    border: none !important;
    border-radius: 2px;
    background-color: white;
}

ul.photoselectInput li {
    border: solid white 1px !important;
    padding: 6px;
    list-style-type: none;
    width: 125px;
    height: 160px;
    float: left;
    position: relative;
}

ul.photoselectInput li.selected img {
    opacity: .3;
    /*border: solid #7CA0C7 1px;*/
    /*background-color: #7CA0C7;*/
}
ul.photoselectInput li.selected::after {
    background-image: url("../img/selected.svg");
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 28px;
    width: 28px;
    position: absolute;
    top: 40px;
    left: 50%;
    margin-left: -14px;
/*    top: 62px;
    left: 85px;
*/}


ul.photoselectInput li .image {
    text-align: center;
    width: 120px;
    height: 89px;
    margin: 0 auto 6px auto;
}

ul.photoselectInput li .loading {
    background: url('../img/loading.gif') no-repeat center center;
}

ul.photoselectInput .left {
    float: left;
    width: 20px;
}

ul.photoselectInput .right {
    margin-left: 20px;
}

ul.photoselectInput p {
    margin: 0px;
    padding: 0;
    font-size: 12px !important;
}

ul.photoselectInput p.title {
    white-space: nowrap;
    width: 90%;
    padding-left: 5%;
    text-overflow: ellipsis;
}


/* photo order */

form ul.photoOrder {
    width: 300px;
    margin-left: 105px;
    padding: 0;
    border-radius: 3px;
    margin-top: 2px !important;
    border: solid #ddd 1px;
}

ul.photoOrder li {
    list-style: none;
    margin: 0;
    padding: 5px;
    background-color: #f2f2f2;
    clear: both;
    cursor: pointer;
}

ul.photoOrder li:first-child {
    border-top: none !important;
}


ul.photoOrder li .label,
ul.photoOrder li a {
    font-weight: normal;
}


ul.photoOrder li:hover {
    background-color: #ddd;
}

ul.photoOrder a.remove {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
    margin-right: 4px;
}

ul.photoOrder a.up,
ul.photoOrder a.sort {
    background-image: url('../img/up.gif');
}

ul.photoOrder .first a.up,
ul.photoOrder .last a.down {
    opacity: 0.3;
}

ul.photoOrder a.down {
    background-image: url('../img/down.gif');
    margin-right: 8px;
}

ul.photoOrder a.remove {
    background: url('../img/delete.png') 0 -7px no-repeat;
    float: right;
    margin-right: 0px;
}

/* filer photopool ===================================================================== */

div.filerPhotoPool {
    width: 100% !important;
    max-width: 100% !important;
    display: flex;
    flex-direction: column;
    column-gap: 15px;

    @media (min-width:480px) {
        flex-direction: row;
    }
}

form .form-row[class*="image"] div.filerPhotoPool input,
form .form-row[class*="file"] div.filerPhotoPool input,
form .form-row[class*="visual"] div.filerPhotoPool input {
    width: auto;
}

div.filerPhotoPool .seperator {
    background-color:red;
    height:100%;
    float:left;
    width:1px;
}

div.filerPhotoPool .left ul {
    width: auto;
    max-height: 592px;
    min-width: 220px;
}

div.filerPhotoPool .left ul,
div.filerPhotoPool .left p {
    margin-left: 0;
    padding-left: 0;
}

div.filerPhotoPool .right {
    box-sizing: border-box;
    margin-top:2px;
}

div.filerPhotoPool .right .photoBrowser {
    box-sizing: border-box;
    background-color: #f2f2f2;
    border: 1px solid #ddd;
    border-radius: 3px;
    min-width: 215px;
    position: relative;
    padding: 10px;
}

div.filerPhotoPool .right iframe {
    width: 100%;
    height: 700px;
    border: solid #ccc 1px;
}

div.filerPhotoPool .right p.action {
    margin-left:0;
    margin-top: -2px;
    padding-left:0;
}

div.filerPhotoPool ul.photoOrder li {
    /*width: 242px;*/
    padding: 10px;
}

div.filerPhotoPool ul.photoselectInput li {
    height: 140px;
    cursor: pointer;
    text-align: center;
}

div.filerPhotoPool ul.photoselectInput li:hover {
    background-color:#eee;
}

div.filerPhotoPool ul.photoselectInput {
    margin-left: 0;
    margin-top: 0 !important;
    width: 100%;
}

div.filerPhotoPool .jsPhotoselectContent {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
}

div.filerPhotoPool .jsPhotoselectContent .col-6 {
    width: calc(50% - 0.5rem);
    flex: 0 0 auto;
    max-width: 250px;

    @media (max-width: 768px) {
        width: 100% !important;
    }
}

div.filerPhotoPool .jsPhotoselectContent .col-6 * {
    width: 100% !important;
}
/*div.filerPhotoPool div.photoselectSearch {
    margin-left:0;
}
*/
div.filerPhotoPool ul.photoOrder {
    max-height: 591px;
    overflow: auto;
}

div.filerPhotoPool ul.photoOrder li {
    position: relative;
    line-height: 0.9em;
}

div.filerPhotoPool ul.photoOrder a.remove {
    position:absolute;
    right:1px;
    top: 3px;
}

div.filerPhotoPool ul.photoOrder a.more {
    position:absolute;
    right: 8px;
    bottom: 10px;
}


div.filerPhotoPool ul.photoOrder li div.options {
    display:none;
    margin-top: 5px;
    padding-top: 5px;
    padding-bottom: 12px;
    border-top: solid #ccc 1px;
    font-size: 8px;
    line-height: 7px;
}

div.filerPhotoPool ul.photoOrder li div.options label {
    /*display: inline-block;*/
    /*width: 60px;*/
}
div.filerPhotoPool ul.photoOrder li div.options * {
    font-size: 12px;
    line-height: 14px;
}


div.filerPhotoPool ul.photoOrder li div.options input[type=text],
div.filerPhotoPool ul.photoOrder li div.options textarea {
    width: 165px;
}

div.filerPhotoPool ul.photoOrder li div.options input[type="radio"],
div.filerPhotoPool ul.photoOrder li div.options input[type="checkbox"] {
    margin-right: 0;
}

div.filerPhotoPool ul.photoOrder li img {
    float:left;
    margin-right:8px;
}

div.filerPhotoPool ul.photoOrder li img.border {
    border: solid #ccc 1px;
}

div.filerPhotoPool div.photoselectSearch {
    width: 250px;
}

div.filerPhotoPool div.photoselectSearch select,
div.filerPhotoPool div.photoselectSearch input {
    width: 200px;
}

div.filerPhotoPool li.uploading .loading {
    height: 97px;
}

div.filerPhotoPool li.uploading .progress {
    height: 10px;
    background-color: #F0F3F8;
    /*background: url('../img/loading.gif') no-repeat center center;*/
}

div.filerPhotoPool li.uploading .progress .bar {
    background-color:#7CA0C7;
    height:100%;
    width: 10%;
}

div.filerPhotoPool li.folder .image img {
    width: 45%;
    margin-top: 25px;
}

div.filerPhotoPool li.folder.parent .image img {
    width: 45%;
}

div.filerPhotoPool li.folder.addfolder {
    opacity: 0.7;
}

div.filerPhotoPool li.folder .title {
    font-weight: bold;
}

div.filerPhotoPool li.empty {
    border:none;
    font-weight: normal;
    font-style: italic;
    padding: 10px;
    box-sizing: border-box;
}


/*div.filerPhotoPool div.photoUploader {
    position: absolute;
    left: 0px;
    top: 0px;
    background-color:red;
}
*/

/* CodeMirror */
div.CodeMirror {
    border: solid #ddd 1px;
    border-radius: 3px;
}