body {
}

#divMainImage {
    /* display: block; */
    text-align: center;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: auto;
    margin-right: auto;
    height: 480px;
    width: 100%;
    max-width: 800px;
    border: 2px solid #333333; /* #5C87B2; /* red; */
    background-color: black;
}

#divOtherImages {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: table;
}

#divImageBlock {
    border-bottom: 1px #5C87B2 solid;
    padding-bottom: 1em;
    display: inline-block;
    width: 100%;
}

.divOtherImages {
    height: 100px;
    width: 100px;
    float: left;
    margin: 4px 4px 4px 4px;
    padding: 1px;
    border: 1px solid #333333;
    /* cursor: pointer; */
    position: relative;
    /* display: none; */
}

    .divOtherImages:hover {
        border: 1px solid red;
    }

.selectedThumbNail {
    border: 3px solid red !important;
    width: 102px !important;
    height: 102px !important;
    margin: 3px 3px 1px 3px !important;
    padding: 0px !important;
}

.thumbListNavigBtn {
    height: 100px;
    width: 35px;
    margin-top: 4px;
    float: left;
    font-size: xx-large;
    font-weight: 900;
}



.divPhotoUpload {
    border-top: 1px #474544 /* #5C87B2 */ solid;
    border-bottom: 1px #474544 /* #5C87B2 */ solid;
    padding: 1em 0 1em 0;
    margin: 1.5em 0 1em 0;
    width: 100%;
    min-height: 240px;
    display: inline-block;
}

.divUploadedPhotos {
    margin-bottom: 10px
}

.spanPhotoUploadError {
    color: Red;
    margin-bottom: 1em
}

.divPhotoErrors {
    margin-bottom: 1em
}



#DragNDrop {
    width: 150px;
    height: 215px;
    /* color: pink; */
    color: red;
    font-weight: 700;
    border: 2px dashed #333333;
    float: left;
    cursor: pointer;
}

@media (max-width: 500px) {
    #DragNDrop {
        width: 34%;
        /* width: 90px; */
        height: 190px;
    }
    div.divOtherImages {
        width: 30%;
        /* width: 88px; */
        height: 90px;
    }
}







#dropImageInviteText {
    text-align: center;
    margin-top: 35px;
    height: 116px;
    font-weight: 500;
}

#progBar {
    text-align: center;
    /* margin-top: 70px; */
    width: 146px;
    height: 15px;
    display: none;
    /* vertical-align: -1.35em; */
    /*
    position: absolute;
    top: 93px;
    left: 0px;  */
}

.progBarCls {
    text-align: center;
    /* margin-top: 70px; */
    width: 100%;
    height: 8px;
    /* vertical-align: -1.35em; */
    position: absolute;
    /* top: 93px; */
    left: 0px;
    bottom: 0px;
}




.deleteImage {
    color: red;
    font-weight: bolder;
    position: absolute;
    right: -4px;
    /* left: 88px; */
    top: -3px;
    height: 20px;
    cursor: pointer;
    text-decoration: none;
    display: none;
    background-color: transparent;
    padding: 0px 6px 0px 6px;
}
    .deleteImage:hover {
        text-decoration: none;
    }

div.deleteImage {
    position: absolute;
    right: 0px;
    top: 0px;
    height: 15px;

    color: red;
    font-weight: lighter;
    cursor: pointer;
    text-decoration: none;
    display: none;
    background-color: white; /* transparent; */
    padding: 0px 1px 0px 1px;

    /*
    border-top: 1px black solid;
        */
}
    div.deleteImage:hover {
        /*
        border-top: 1px red solid;
            */
    }