#fileInput {
  width: 0;
  height: 0;
  overflow: hidden;
  display: none;
}

#modal {
  z-index: 10;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #5F5F5F;
  opacity: 0.95;
  display: none;
}

#preview {
  z-index: 11;
  position: fixed;
  /*top: 14% !important;
  left: 35% !important;*/
  display: none;
  border: 4px solid #A5A2A2;
  border-radius: 4px;
  float: left;
  font-size: 0px;
  line-height: 0px;
}

#preview .buttons {
    width: 110px;
    position: absolute;
    bottom: -65px;
    right: 0px;
    display: block;
}

#preview .buttons .ok {
  border: 4px solid #F5F5F5;
  border-radius: 4px;
  width: 50px;
  height: 50px;
  line-height: 0px;
  font-size: 0px;
  background-image: url('../images/Ok.png');
  background-size: cover;
  float: left;
}

#preview .buttons .ok:hover { background-image: url('../images/OkGreen.png'); }

#preview .buttons .cancel {
  margin-bottom: 4px;
  border: 4px solid #F5F5F5;
  border-radius: 4px;
  width: 50px;
  height: 50px;
  line-height: 0px;
  font-size: 0px;
  background-image: url('../images/Cancel.png');
  background-size: cover;
  float: right;
}

#preview .buttons .cancel:hover { background-image: url('../images/CancelRed.png'); }

.span4.cropme {
  width: 300px;
  height: 202px;
  border: 1px dashed black;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: xx-large;
}

.span4.cropme img {
    width: 100%;
}

@media (max-width:768px) {
    #preview {
        /*top: 14% !important;
        left: 35% !important;*/
        transform: scale(0.60);
    }

    #preview .buttons {
        width: 160px;
        position: absolute;
        bottom: -90px;
        right: 0px;
        display: block;
    }

    #preview .buttons .ok {
        border: 4px solid #F5F5F5;
        border-radius: 4px;
        width: 70px;
        height: 70px;
        line-height: 0px;
        font-size: 0px;
        background-image: url('../images/Ok.png');
        background-size: cover;
        float: left;
    }

    #preview .buttons .cancel {
        margin-bottom: 4px;
        border: 4px solid #F5F5F5;
        border-radius: 4px;
        width: 70px;
        height: 70px;
        line-height: 0px;
        font-size: 0px;
        background-image: url('../images/Cancel.png');
        background-size: cover;
        float: right;
    }
}

@media (max-width:424px) {
    #preview {
        /*top: 14% !important;
        left: 35% !important;*/
        transform: scale(0.50);
    }

    .span4.cropme {
        width: 100%;
        min-height: 150px;
        height: auto;
        border: 1px dashed black;
        cursor: pointer;
    }

    #preview .buttons {
        width: 200px;
        position: absolute;
        bottom: -110px;
        right: 0px;
        display: block;
    }

    #preview .buttons .ok {
        border: 4px solid #F5F5F5;
        border-radius: 4px;
        width: 90px;
        height: 90px;
        line-height: 0px;
        font-size: 0px;
        background-image: url('../images/Ok.png');
        background-size: cover;
        float: left;
    }

    #preview .buttons .cancel {
        margin-bottom: 4px;
        border: 4px solid #F5F5F5;
        border-radius: 4px;
        width: 90px;
        height: 90px;
        line-height: 0px;
        font-size: 0px;
        background-image: url('../images/Cancel.png');
        background-size: cover;
        float: right;
    }
}