/* https://blog.logrocket.com/guide-image-overlays-css/ */

/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_transparent_bottom

 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_blurred_bg

 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_title !!!!!!
 */

body, html {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #000;
}
* {box-sizing: border-box;}

.image-container {
    position: relative;
    width: 100%;
}
.image {
    display: block;
    width: 100%;
    height: auto;
    /*cursor: pointer;*/
}

.choose-image:hover {
    cursor: pointer;
}

.overlay {
    position: absolute;
    bottom: 0;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.4); /* Black see-through */
    color: #f1f1f1;
    width: 100%;
    transition: .5s ease;
    opacity:0;
    color: white;
    font-size: 14px;
    padding: 20px 0 10px 10px;
}
.image-container:hover .overlay {
    opacity: 1;
    cursor: pointer;
}
.overlay:hover .svg-delete {
    stroke: #ff0000;
    stroke-width: 0.15em;
}
.svg-delete {
    stroke: #ffffff;
    stroke-width: 0.15em;
}
.files-svg {
    display: block;
    width: 100%;
    height: 100%
}
.overLay-left {
    display: block;
    float: left;
    width: 80%;
    word-wrap: break-word;
}
.overLay-right {
    display: block;
    float: right;
    margin-top: -10px;
    width: 40px !important;
    height: 40px;
}
.hidden {
    display: none !important;
}