.img-preview {

  width: 256px;

  height: 256px;

  position: relative;

  border: 5px solid #f8f8f8;

  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);

  margin-top: 1em;

  margin-bottom: 1em;

}

.img-preview > div {

  width: 100%;

  height: 100%;

  background-size: 256px 256px;

  background-repeat: no-repeat;

  background-position: center;

}

input[type="file"] {

  display: none;

}

.upload-label {

  display: inline-block;

  padding: 12px 30px;

  background: #39d2b4;

  color: #fff;

  font-size: 1em;

  transition: all 0.4s;

  cursor: pointer;

}

.upload-label:hover {

  background: #34495e;

  color: #39d2b4;

}

.loader {

  border: 8px solid #f3f3f3; /* Light grey */

  border-top: 8px solid #3498db; /* Blue */

  border-radius: 50%;

  width: 50px;

  height: 50px;

  animation: spin 1s linear infinite;

}

@keyframes spin {

  0% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(360deg);

  }

}